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ГЛАВА 1 
Осваиваем работу 
с НТМЕ-релактором Dreamweaver 


Хорошо знакомая большинству из нас меб-страница представляет собой обыч- 
ный текстовый файл, содержащий управляющие элементы — теги языка HTML. 
Простую меб-страницу можно легко написать с помощью программы Блокнот 
(Notepad) операционной системы Windows. Но, несмотря на свою простоту, язык 
HTML все же требует времени на освоение, и многие именно по этой причине 
отказываются от знакомства с ним. Тем более, существует множество программ, 
которые позволяют легко создавать меБ-страницы, не вникая в тонкости про- 
граммирования и направив все силы на оформление и информационное напол- 
нение. Такие программы называются НТМЁ-редакторами. 


Существует два вида НТМЕ-редакторов: 


и’ Кодовые редакторы используют в основном профессионалы, так как такого 
рода программы позволяют работать напрямую с кодом НТМЕ, предоставляя 
пользователю дополнительные функции, такие как подсветка синтаксиса и 
многие другие; 


Y Визуальные редакторы, наоборот, всячески скрывают от пользователя код 
HTML, предлагая использовать различные инструменты для создания Web - 
страниц. Такие программы, к тому же, позволяют сразу видеть результат на 
экране монитора. 


В этой книге мы рассмотрим программу, совмещающую возможности обоих 
НТМЕ-редакторов и называющуюся Macromedia Dreamweaver. 


Первое знакомство 


Описываемая в этой книге программа Macromedia Dreamweaver сочетает в себе 
и кодовый, и визуальный редакторы. Таким образом, эта программа может быть 
полезна и для профессионалов, и для новичков. Кроме того, Macromedia Dream- 
weaver генерирует оптимизированный НТМЁ-код, избавляясь от лишних команд, 
поэтому программа может быть использована для обучения языку HTML. Можно 
воспользоваться средствами визуальных инструментов и тут же просмотреть 
получившийся код HTML. 


Редактор Macromedia Dreamweaver является одной из лучших программ своего 
рода. Данная программа проста в освоении, снабжена подробным справочным 
руководством, имеет много дополнительных возможностей, которые без труда 
позволят добиться хороших результатов. 


В данной главе мы установим, запустим и настроим программу Macromedia 
Dreamweaver. Рассмотрим рабочую среду программы и познакомимся с наибо- 
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лее полезными панелями инструментов. Также научимся создавать web- 
страницы и мер-сайты, вводить и редактировать текст, создавать списки, ссылки 
и гиперссылки. Опыт, полученный в этой главе, пригодится для создания как 
простых, так и профессиональных \МеБ-страниц. Ведь чаще всего на web- 
страницах можно встретить именно текст и гиперссылки, поэтому данная глава 
станет основой для следующих экспериментов. 


Ссылка представляет собой элемент на web -странице, выделяе- 
мый цветом и подчеркиванием, щелкнув мышью на которых пользо- 
ватель переходит к другому разделу этой же иеБ-страницы. 


Гиперссылка отличается от обычной ссылки тем, что пользова- 
тель, щелкнув на ней, переходит к другой иеБ-странице или web- 
сайту. Кроме того, гиперссылка может ссылаться на файл, ко- 
торый можно загрузить. 


Установка программы 


Программа Macromedia Dreamweaver является условно-бесплатной. Это означа- 
ет, что вам дается месяц на то, чтобы испытать программу, а затем потребуется 
регистрация. Более подробно о регистрации программы вы можете прочитать на 
web-caiite фирмы Macromedia. 


> Откройте папку x:\SOFT\Dreamweaver 8, где x: — буква дисковода для компакт- 
дисков на вашем компьютере. 


> Дважды щелкните мышью на файле Огеатмеауег8-еп.ехе. После распаковки 
установочных файлов на экране появится диалог Macromedia Dreamweaver 8 — 
InstallShield Wizard (Macromedia Dreamweaver 8 — Мастер установки) (Рис. 1.1). 


i Macromedia Dreamweaver 8 - InstallShield Wizard 


Welcome to the InstallShield Wizard for 
Macromedia Dreamweaver 8 


The InstallShield(R) Wizard will install Macromedia 
Dreamweaver 8 on your computer. To continue, click Next. 


WARNING: This program is protected by copyright law and 
international treaties. 


Рис. 1.1. Первый диалог мастера установки 
программы Macromedia Dreamweaver 
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> Нажмите кнопку Next (Далее) для перехода к следующему шагу. Содержимое 
диалога мастера установки изменится, и вам будет предложено прочитать ли- 
цензионное соглашение (Рис. 1.2). 


ie Macromedia Dreamweaver 8 - InstallShield Wizard 


License Agreement Lin macromedia 
Please read the following license agreement carefully. 


MACROMEDIA® SOFTWARE END USER LICENSE AGREEMENT 


ATTENTION: YOU MAY NEED TO SCROLL DOWN TO THE END OF THIS 
EULA BEFORE YOU CAN AGREE TO THE EULA AND CONTINUE WITH 
THE SOFTWARE INSTALLATION. 


PORTANT: THIS AGREEMENT (or “EULA") IS A LEGAL AGREEMENT 
BETWEEN THE PERSON, COMPANY, OR ORGANIZATION THAT HAS 
LICENSED THIS SOFTWARE (“YOU" OR "CUSTOMER") AND 
MACROMEDIA, BY INSTALLING AND USING THE SOFTWARE, Г 


CCCNTO т ACNHAIANC arin aACncere ТМ ТЫС TOMA 


Рис. 1.2. Второй диалог мастера установки 
программы Macromedia Dreamweaver 


> Установите переключатель в положение | accept the terms in license agreement 
(Я согласен с условиями лицензии). Активизируется кнопка Next (Далее). 


> Нажмите кнопку Next (Далее). Содержимое диалога изменится, и вам будет 
предложено изменить некоторые параметры, касающиеся пути установки про- 
граммы и создания ярлыков (Рис. 1.3). 


is: Macromedia Dreamweaver 8 - InstallShield Wizard 


Destination Folder and Shortcuts ves macromedia 
Click on Change to install to a different folder. 


Рис. 1.3. Третий диалог мастера установки 
программы Macromedia Dreamweaver 
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Если вы хотите изменить расположение папки, в которую будет установлена 
программа Macromedia Dreamweaver, выполните следующие шаги. 


> Нажмите кнопку Change (Изменить). Появится диалог операционной системы 
Windows, служащий для выбора папки назначения. 


> Выберите папку, в которую будет установлена программа Macromedia Dream- 
weaver. 


> Подтвердите выбор папки назначения, нажав кнопку OK. 
Также вы можете изменить следующие параметры. 


> Установите флажок Create QuickLaunch Bar Shortcut (for the Current User 
only) (Создать ярлык Ha панели быстрого запуска (только для текущего пользо- 
вателя)), если требуется, чтобы на панели быстрого запуска появился ярлык для 
запуска программы Macromedia Dreamweaver. 


> Установите флажок Create Shortcut on Desktop (for АП Users) (Создать ярлык 
на рабочем столе (для всех пользователей)), если требуется, чтобы на рабочем 
столе был создан ярлык для запуска программы Macromedia Dreamweaver. 


Мы оставим все параметры без изменений и перейдем к следующему диалогу 
мастера установки. 


> Нажмите кнопку Next (Далее). Содержимое диалога мастера установки изменит- 
ся, и появится информация об ассоциируемых файлах (Рис. 1.4). 


iz Macromedia Dreamweaver 8 - InstallShield Wizard 


Default Editor macromedia 
Macromedia Dreamweaver 8 will set itself as default editor For the Following file 


Puc. 1.4. Четвертый диалог мастера установки 
программы Macromedia Dreamweaver 


Элементы управления этого диалога позволяют выбрать типы файлов, для KOTO- 
рых программа Macromedia Dreamweaver будет установлена редактором по 
умолчанию. Мы изменять ничего не будем, а перейдем к следующему шагу. 
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> Нажмите кнопку Next (Далее) для перехода к следующему диалогу. Содержимое 
диалога мастера установки изменится (Рис. 1.5). 


i Macromedia Dreamweaver 8 - InstallShield Wizard о 


Ready to Install the Program vin macromedia 


The wizard is ready to begin installation, 


Рис. 1.5. Пятый диалог мастера установки 
программы Macromedia Dreamweaver 


В пятом диалоге мастер установки сообщает, что все готово для начала установки. 


> Нажмите кнопку Install (Установить). Содержимое диалога мастера установки 
изменится, и начнется процесс установки программы на ваш компьютер 
(Рис. 1.6). 


Installing Macromedia Dreamweaver 8 tiny macromedia 


The program features you selected are being installed. 


Рис. 1.6. Процесс установки программы 
Macromedia Dreamweaver 
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Когда все файлы программы будут скопированы Ha ваш компьютер, диалог мас- 
тера установки сообщит вам, что программа успешно установлена (Рис. 1.7). 


is Macromedia Dreamweaver 8 - InstallShield Wizard 


InstallShield Wizard Completed 


The InstallShield Wizard has successfully installed Macromedia 
Dreamweaver 8. Click Finish to exit the wizard. 


Г` Launch Macromedia Dreamweaver 8 


Г. Show the readme file 


Рис. 1.7. Последний диалог мастера установки 
программы Macromedia Dreamweaver 


> Нажмите кнопку Finish (Готово). Диалог мастера установки закроется. 


Программа Macromedia Dreamweaver установлена и готова к работе. 


Запуск программы Macromedia Dreamweaver 


Программа Macromedia Dreamweaver запускается также просто, как и любое 
другое приложение для операционной системы Windows. 


> Нажмите кнопку Пуск (Start) в левом нижнем углу экрана, и в появившемся 
главном меню выберите команду Все программы + Macromedia « Macromedia 
Dreamweaver 8 (All programms + Macromedia + Macromedia Dreamweaver 8). 


Tak как мы запустили программу 
Macromedia Dreamweaver пер ВЫЙ раз, Select the workspace layout you prefer. You can change layouts later by selecting 
на § экране появится ‚ диалог | “row? Workspace Lapou 

Workspace Setup (Установки рабо- 
чей среды), элементы управления 
которого позволяют выбрать рабо- 
чую среду программы (Рис. 1.8): 
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и’ Рабочая среда Designer (Дизай- 
Hep) программы Macromedia 
Dreamweaver предназначена для 


создания страниц средствами ви- . 
зуальных инструментов; Рис. 1.8. Диалог выбора рабочей среды 
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и Рабочая среда Coder (Кодер) в первую очередь рассчитана на опытных поль- 
зователей и удобна для ручного редактирования кода HTML. 


Мы будем использовать визуальные средства НТМЁ-редактора, поэтому выбе- 
рем рабочую среду Designer (Дизайнер). 


> Установите переключатель в положение Designer (Дизайнер). 


> Нажмите кнопку ОК. Диалог Workspace Setup (Установки рабочей среды) за- 
кроется и на экране появится главное окно программы Macromedia 
Dreamweaver, с которым мы познакомимся чуть позже. 


Мы запустили программу Macromedia Dreamweaver, и прежде чем начать работу 
над первым проектом, нам потребуется произвести некоторые настройки, о чем 
вы узнаете из следующего раздела. 


Настройка Macromedia Dreamweaver 


Прежде чем приступить к работе в программе Macromedia Dreamweaver, потре- 
буется настроить в ней поддержку русского языка. 


Текстовая информация на компьютере хранится в цифровом виде, а чтобы циф- 
ры превратить в символы используются кодовые таблицы. Причем, не все кодо- 
вые таблицы поддерживают русский язык, и, выбрав неподходящую таблицу, 
вместо русских букв мы можем увидеть набор непонятных символов. 


Для русского языка существует несколько кодовых таблиц, но в настоящее вре- 
мя чаще всего используются две из них: 


и’ Кириллица (KOI8-R) (Cyrillic (KOI8-R)) — применяется в русских версиях 
UNIX-coBMeCTHMBIX операционных систем; 


и’ Кириллица (Windows) (Cyrillic (Windows)) — применяется в русских версиях 
операционной системы Windows. 


Если вы работаете в операционной системе Windows, предпочтительней исполь- 
зовать кодировку Кириллица (Windows), хотя возможно, что администратор 
сервера, на котором вы будете размещать свои меб-страницы, попросит вас ис- 
пользовать другую кодировку. В дальнейшем кодировку можно будет сменить, 
поэтому остановим свой выбор на Кириллице (Windows). 


> В главном окне программы Macromedia Dreamweaver выберите команду меню 
Edit + Preferences (Правка + Предпочтения). На экране появится диалог 
Preferences (Предпочтения). 


> Выберите в области Category (Категории) диалога Preferences (Предпочтения) 
значение New Document (Новый документ). Содержимое диалога Preferences 
(Предпочтения) изменится, и отобразятся элементы управления параметрами 
нового документа (Рис. 1.9). 
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Preferences 


Category New Document 


Default document: 


Default extension: | НЕ 
Code Rewriting 
Copy/Paste Default Document Type (ОТО): | XHTML 1.0 Transitional 
CSS Styles 
File Compare 
File Types / Editors 
Fonts 
Highlighting Default encoding: |Западноевропейская 
Invisible Elements 


Use when opening existing files that don't specify an encoding 


Unicode Normalization Form: 


[_] Include Unicode Signature (BOM) 


Show New Document dialog box on Control+N 


Puc. 1.9. Диалог Preferences (Предпочтения) 
с элементами управления параметрами нового документа 


> В открывающемся списке Default encoding (Кодировка по умолчанию) выбери- 
те значение Кириллица (Windows) (Cyrillic (Windows)). 


> В области Category (Категория) выберите значение Fonts (Шрифты). Содержи- 
мое диалога Preferences (Предпочтения) изменится (Рис. 1.10). 


Preferences 


Г Category 


м: 


Западноевропейская 
Иврит 


Китайская традиционная 


File tle ’ Editors 


Ing 
Invisible Elements 


—— о’ о 3’ 


Рис. 1.10. Диалог Preferences (Предпочтения) — выбор шрифтов 
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> Выберите в прокручиваемом списке Font settings (Установки шрифта) значение 
Кириллица (Cyrillic). 


> Нажмите кнопку ОК. Диалог Preferences (Предпочтения) закроется. 


Программа Macromedia Dreamweaver настроена должным образом для работы с 
русским языком, и теперь самое время познакомиться с рабочей средой программы. 


Рабочая срела Macromedia Dreamweaver 


После Toro, как вы запустили Macromedia Dreamweaver, на экране появится глав- 
ное окно программы. Поскольку новый проект еще не создан, в главном окне про- 
граммы Macromedia Dreamweaver а ce ie pap EHS Le ae 

a Mactomertia Dreamweaver 8 | а > — : : 


File Edit Yiew Insert Modify Text Commands Site Window Help 


у pie ;. о ГА Ем Е 
Common W за | ное. < боев 


ro SREAMWEARE 


:$ Мой компьютер 
i 2 Сетевое окружение 
+ -$Ы FTP &RDS Servers 
if = Desktop items 


Create from Samples 


© CSS Style Sheets 


Open a Recent Item Create New 


© open... i) HTML 


i ColdFusion 
i PHP 

i ASP VBScript 
i ASP.NET C# 


© Framesets 

© Page Designs (CSS) 
© Starter Pages 

© Page Designs 


(& JavaScript 

2 XML 

i XSLT (Entire page) 

& CSS 

5% Dreamweayer Site... Extend 


© more... @ Dreamweaver Exchange 


* Take a quick tour of Dreamweaver БЕ Ok oF Oe miner 


* Learn about documentation gues Tips and tricks, training, special offers and 
resources Saad more available at macromedia.com 
‚ Find authorized training 


3 Dont show again 


Рис. 1.11. Главное окно программы Macromedia Dreamweaver 
с открытой стартовой страницей 


Элементы управления стартовой страницы позволяют выполнить одно из дейст- 
вий на выбор: открыть существующую \М/еБ-страницу, создать новый проект, a 
также перейти на web-caiit фирмы Macromedia. 
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Под заголовком главного окна программы Macromedia Dreamweaver находится 
строка меню, в которой сосредоточены все функции НТМЁ-редактора. Однако для 
удобства пользователей в программе существует огромное количество панелей ин- 
струментов, которые существенно упрощают процесс создания Мер-страниц. 


Создадим новую web-cTpaHuuy. Для этого на стартовой странице расположена 
группа элементов управления Create New (Создать новый). 


> Щелкните мышью на ссылке HTML в группе Create New (Создать новый), рас- 
положенной на стартовой странице. Стартовая страница закроется, в рабочей 
среде программы Macromedia Dreamweaver появится окно нового документа 
(Рис. 1.12). 


@ Macromedia Dreamweaver 8 - [Untitled-1 (XHTML)] 
File Edit View Insert Modify Text Commands Site Window Help 


| сю > № 5 $15 в а -+- 8 2 Q| Le ER rane 


$- Sy Сетевое окружение 
‚-- $8 FTP & RDS Servers 
[+ C3 Desktop items 


Рис. 1.12. Окно документа в программе Macromedia Dreamweaver 


Теперь по порядку рассмотрим интерфейс программы: 


и’ Окно документа — служит для отображения открытой в данный момент web- 
страницы. 


Так как по умолчанию используется режим Design (Дизайн), меб-страница в окне 
документа программы Macromedia Dreamweaver отображается в том виде, в каком 
будет выглядеть в обозревателе Интернета. Также доступны еще два режима: Code 
(Код), в котором страница отображается в виде НТМЁ-кода, и Эр (Разделение) — 
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режим отображения сразу двух вариантов. Для переключения между режимами ис- 
пользуются кнопки на панели инструментов Document (Документ) (Рис. 1.13); 


Design 


Рис. 1.13. Кнопки переключения режима отображения 
на панели инструментов Document (Документ) 


Y Панель инструментов Document (Документ) — содержит элементы управле- 
ния, предоставляющие доступ к наиболее востребованным функциям при ра- 
боте с меб-страницами, таким как просмотр в обозревателе Интернета и пе- 
реключение между режимами отображения проекта (Рис. 1.14); 


Te a 5 


Рис. 1.14. Панель инструментов Document (Документ) 


Y Строка состояния расположена в нижней части окна документа и содержит 
информацию о Меб-странице. В правой части строки состояния расположены 
элементы управления масштабом документа (Рис. 1.15); 


Олин SY ри erat Sr неее о, ма. о & 190 


Рис. 1.15. Строка состояния 


779х421* 1K} 1 sec! 


и’ Панель инструментов Insert (Вставка) расположена в верхней части главного 
окна программы и содержит элементы управления для создания и вставки 
объектов, таких как таблицы, изображения или слои (Рис. 1.16). 


SS Be8-@¢ 8SO|8-8 


Puc. 1.16. Панель инструментов Insert (Вставка) 


Common ¥ 


Стоит отметить, что элементы управления, предназначенные для вставки объектов, 
разделены на группы. Для отображения элементов управления определенной груп- 
пы необходимо в открывающемся списке выбрать одно из значений (Рис. 1.17); 


esl 


Layout 
Forms 
| Text 

HTML 
| Application 
Flash elements 
Favorites 


Show as Tabs 


Рис. 1.17. Группы элементов управления 
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и’ Панель инструментов Properties (Свойства) содержит часто используемые 
элементы управления для изменения свойств объектов, расположенных на 
миеб-странице. Содержимое этой панели изменяется в зависимости от типа 
выбранного объекта, поэтому элементы управления мы рассмотрим по мере 
знакомства с программой (Рис. 1.18). 


Format | None 


| Default Font 


isi 


Рис. 1.18. Панель инструментов Properties (Свойства) 


Кроме описанных, в программе Масготе а Огеатмеауег существует несколько 
других панелей инструментов, элементы управления которых предназначены 
для различных целей. Эти панели инструментов объединены в группы и распо- 
ложены в свернутом состоянии в правой части главного окна. Чтобы развернуть 
или свернуть определенную панель инструментов, следует щелкнуть мышью на 
заголовке панели. 


Все панели, за исключением панели Insert (Вставка), могут быть перемещены в 
любое удобное место в пределах главного окна. Для этого необходимо, нажав и 
удерживая кнопку мыши на заголовке, переместить панель в нужную область 
главного окна программы Macromedia Dreamweaver. Кроме того, панели инст- 
рументов могут быть скрыты и, по мере необходимости, вновь отображены. 


> Выберите команду меню Window + Insert (Окно + Вставка). Панель инструмен- 
тов Insert (Вставка) будет скрыта. 


Чтобы снова отобразить скрытую панель инструментов, необходимо повторить 
действие. 


> Выберите команду меню Window + Insert (Окно + Вставка). Панель инструмен- 
тов Insert (Вставка) снова отобразится на экране. 


В программе Macromedia Dreamweaver есть возможность скры- 
вать на время сразу все панели инструментов, тем самым выво- 
дя создаваемую имеБ-страницу на весь экран. 


Скрытие панелей производится нажатием клавиши |F4] на кла- 


виатуре. Все панели инструментов будут скрыты, а окно доку- 
= мента займет весь экран. 


Чтобы вновь отобразить панели инструментов, следует по- 
вторно нажать клавишу [Е]. 
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В этом разделе мы познакомились с рабочей областью программы Масготе а 
Dreamweaver и теперь настало время приступить непосредственно к созданию 
своей м/еб-страницы. 


Создаем м/еб-страницу 


В данном разделе мы рассмотрим приемы создания, сохранения и открытия Web- 
страниц. Процедуры, которые здесь будут рассмотрены, являются основой, без 
которой невозможна работа над подготовкой меб-страниц. 


Ранее мы уже пробовали создавать меб-страницу, воспользовавшись элемента- 
ми управления на стартовой странице. Но если стартовая страница в нужный 
момент не отображена, можно воспользоваться другим способом. 


> Выберите команду меню File + New (Файл + Создать). На экране появится диа- 
лог New Document (Новый документ) (Рис. 1.19). 


New Document 


General ee 

Category: Basic page: 
Basic раде ‘@) HTM 
Dynamic page ‘gg. HTML template 
Template page ig) Library item 
Other ge XSLT (Entire page) 
CSS Style Sheets 91 XSLT (Fragment) 
Framesets ig) ActionScript <No preview> 
Page Designs (C55) 5 ©55 
Starter Pages ig: JavaScript 
Page Designs ge XML 


Description: 


lie document 


Document Type | то} 
[HTML 4, 4. 01 Transitional _ . 


(a | [св — а и. : 2 = | : e Г вы: ме, — 


Рис. 1.19. Диалог New Document (Новый документ) 


> Убедитесь, что выбрано значение Basic раде (Простая страница) в списке 
Саедогу (Категория), который расположен в левой части диалога Мем 
Document (Новый документ). 


> Убедитесь, что выбрано значение HTML (Язык разметки гипертекста) в списке 
Basic раде (Простая страница), расположенном в центре диалога New 
Оосите (Новый документ). 


> В открывающемся списке Document Туре (DTD) (Тип документа) выберите зна- 
чение HTML 4.01 Transitional. 
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> Нажмите кнопку Create (Создать). Диалог New Document (Новый документ) 
закроется, а на экране появится новая Меб-страница. 


Программа Macromedia Dreamweaver позволяет создавать множество различных 
типов документов. Мы выбрали шаблон простой страницы. Кроме того, в от- 
крывающемся списке Document Туре (DTD) (Тип документа) мы выбрали в ка- 
честве языка разметки значение HTML 4.01 Transitional вместо XHTML, более 
новой версии языка разметки. Это было сделано, чтобы создаваемые нами стра- 
ницы правильно отображались не только в новых обозревателях Интернета, но и 
в программах более старых версий. Указанное значение рекомендуется, потому 
что не все пользователи Интернета пользуются новейшими версиями программ, 
а значит, и не смогут просматривать ваши мМеб-страницы, использующие в каче- 
стве языка разметки язык XHTML. 


Теперь мы рассмотрим процедуру сохранения меб-страниц. Чтобы сохранить 
страницу, выполните следующие действия: 


> Выберите команду меню File + Save (Файл + Сохранить). 


Так как новая ммеб-страница сохраняется первый раз, на экране появится диалог 
Save As (Сохранить как) (Рис. 1.20). 


Save As 


документы 


Г 
Недавние 
Рабочий стол | 
| 
| 
| 
| 


Мои документы 


Мой 
компьютер 


= ааа 
example.html 


Ned fs a Aa : — у, 
‚ Сетевое Типфайла = All Documents (“.htm,;*.html,*.shtmn;*. shtml," hta; м | 


Рис. 1.20. Диалог сохранения иеБ-страницы 
> В открывающемся списке Папка (Folder) выберите диск и папку, в которую бу- 
дет сохранен файл меб-страницы. 
> В поле ввода текста Имя файла (File name) введите имя сохраняемого файла. 


> Нажмите кнопку Сохранить (Save). Диалог Save as (Сохранить как) закроется, 
и документ будет сохранен. 
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После этого, при последующем сохранении документа, программа Macromedia 
Dreamweaver не будет выводить диалог Save as (Сохранить как), а сохранит из- 
менения в ald ИМЯ Korepero BENG paseo panes 


Стоит отметить, что диалог Save as ОВЕН как) является 
стандартным диалогом операционной системы Windows, поэтому 
сохранение файла в программе Macromedia Dreamweaver не отли- 
чается от сохранения файла в любой другой программе операци- 
онной системы Windows. 


Часто приходится вносить изменения в уже готовые \меб-страницы, поэтому 
возникает необходимость открывать сохраненные меб-страницы в программе 
Macromedia Dreamweaver. 


> Выберите команду меню File + Open (Файл + Открыть). На экране появится диа- 
лог Ореп OTRP EOE) Ио, ie et 


_ Рабочий cron — 


_ Мои документы — 


|. [Al Document (hm hink stm нина: У | Е 


Рис. 1.21. Диалог открытия иеБ-страницы 


> В открывающемся списке Папка (Folder) выберите диск и папку, в которой на- 
ходится необходимый файл. 


> Щелкните мышью на сохраненном файле. В поле ввода Имя файла (File name) 
появится имя выбранного файла. 


> Нажмите кнопку Открыть (Ореп). Диалог Ореп (Открыть) закроется, и на экра- 
не появится содержимое открытой меб-страницы. 


Диалог Ореп (Открыть) также является стандартным диалогом 
операционной системы Windows, поэтому открыть файл в про- 
грамме Macromedia Dreamweaver не составляет никакого труда. 
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Мы познакомились с приемами создания, сохранения и открытия \МеБ-страниц. 
Стоит отметить, что рассмотренные процедуры будут часто востребованы в 
процессе работы на меб-страницами. 


Созлаем м/е-сайт 


Программа Macromedia Dreamweaver позволяет создавать не только отдельные 
миеб-страницы, HO и целые м/еБ-сайты, тем самым предоставляя возможность ра- 
боты с множеством меБ-страниц, относящихся к одному проекту, как с единым 
целым. Таким образом создаются проекты, в которых содержатся настройки и 
техническая информация, позволяющая публиковать \меб-сайт в Интернете, 
проверять правильность и работоспособность всех гиперссылок на web- 
страницах. Тем самым программа Macromedia Dreamweaver упрощает создание, 
публикацию в Интернете и обновление мер-сайтов. 


Настало время приступить к созданию нашего первого web-caiita. 


> Выберите команду меню Site + New Site (Сайт + Создать сайт). На экране поя- 
вится диалог Site Definition for Unnamed Site 1 (Определение сайта для 
Unnamed Site 1) (Рис. 1.22). 


Site Definition for Unnamed SHE 1 


А site, п Macromedia Dreamweaver, is а collection of files and Folders that corresponds to a 
website оп а server, 


What would you like to name your site? 


Unnamed Site 1 


Ехатре: mySite 


What is the HTTP Address (URL) of your site? 


Example: http://www.myHost.com/mySite 


If you want to work directly on the server using FTP or RDS, you should create an FTP or ROS 
erver commection. Working directly on the server does not allow you to perform sitewide 
operations like link checking or site reports. 


| ' <Back | Next > || Cancel | Help | 


Рис. 1.22. Диалог мастера создания сайта — шаг первый 
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> В поле ввода What would you like to name your site? (Как вы хотите назвать 
свой сайт?) введите название вашего сайта. 


Вы можете выбрать любое понравившееся вам название. Например, назовем 
наш первый меб-сайт именем Site. 


> Обратите внимание, что после ввода имени сайта заголовок диалога Site 
Definition for Unnamed Site 1 (Определение сайта для Unnamed Site 1) изменится 
на Site Definition for Site1 (Определение сайта для Sitel). 


> В поле ввода What is the HTTP Address (URL) of your site? (Какой НТТР-адрес 
вашего сайта?) введите адрес, согласно которому ваш сайт будет расположен в 
Интернете. 


Поле ввода What is the HTTP Address (URL) of your site? (Какой НТТР-адрес ва- 
шего сайта?) используется программой Macromedia Dreamweaver для проверки 
правильности гиперссылок. На то время, пока точное расположение сайта неиз- 
вестно, это поле можно оставить незаполненным, а позднее ввести нужный адрес. 


> Нажмите кнопку Next (Далее) для перехода к следующему шагу. Содержимое 
диалога Site Definition for Site1 (Определение сайта для Sitel) изменится 
(Рис. 1.23). 


Site Definition for Site 


Basic | Advanced | 


Editing Files, Part 2 Testing Files Sharing Files 
Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? 


() Мо, | do not want to use a server technology. 
C) Yes, | want to use a server technology. 


Puc. 1.23. Диалог мастера создания сайта — шаг второй 
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На данном этапе создания сайта вам будет предложено ответить Ha вопрос Do 
you want to work with a server technology such as ColdFusion, ASP.NET, ASP, 
JSP, or РНР? (Хотите ли вы работать с серверными технологиями, подобными 
ColdFusion, ASP.NET, ASP, JSP или РНР?). Ответив положительно, вы сможете 
создавать микропрограммы, которые будут выполняться на Web-cepBepe, а pe- 
зультат их исполнения будет отображаться в обозревателе Интернета посетителя 
сайта. Эта возможность рассчитана преимущественно на опытных Wweb- 
разработчиков и нам в данный момент не понадобится. Поэтому использовать 
серверные технологии мы не будем. 


> Убедитесь, что переключатель установлен в положение No, | do not want to use 
а server technology (Нет, я не хочу использовать серверные технологии). 


> Нажмите кнопку Next (Далее). Содержимое диалога измениться, и вы перейдете 
к следующему шагу (Рис. 1.24). 


Site Definition for Site1 


| Editing Files, Part 3 Testing Files Sharing Files 


How do you want to work with your files during development? 


(2) Edit local copies on my machine, then upload to server when ready (recommended) 
C) Edit directly on server using local network 


Where on your computer do you want to store your files? 


C:\Documents and Settings Slexey\Mou gokymentbi\Sitel \ es 


< Back | [next> J Cancel || Help | 


Рис. 1.24. Диалог мастера создания сайта — шаг третий 


На данном шаге необходимо выбрать один из двух вариантов работы с файлами 
web-caiita. Первый вариант заключается в работе с копиями МеБ-страниц, pac- 
положенных на локальном компьютере, и дальнейшей загрузке данных копий на 
web-cepBep уже готовыми. Второй вариант подразумевает работу с файлами, 
размещенными на сервере, используя локальную сеть. Для нас оптимальным 
является первый вариант, так как наш сайт еще не размещен в Интернете. 
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> Убедитесь, что переключатель установлен в положение Edit local copies on my 
machine, then upload to server when ready (recommended) (Редактировать ло- 
кальную копию \Меб-сайта на своем компьютере и загружать Ha сервер, когда 
меб-сайт будет готов (рекомендуется)). 


Следующим шагом вам необходимо выбрать папку, в которой будет размещена 
локальная копия Web-caiita. По умолчанию это папка с названием проекта — Site, 
расположенная в директории Мои документы (My documents). Если вы хотите 
изменить расположение файлов проекта, выполните следующие действия. 


> Нажмите кнопку {>}, расположенную справа от поля ввода Where оп your com- 
puter do you want to store your files? (Где на своем компьютере вы хотите раз- 
местить файлы?). Ha экране появится диалог Choose local root folder for site 
Site1 (Выберите локальную корневую папку для сайта Sitel) (Рис. 1.25). 


Недавние 
документы 


’ Рабочий стол 


‚>. 
a 


Мои документы 


Мой 
компьютер 


__ Сетевое | ite) — _ о ’ |] Отмена 


Рис. 1.25. Диалог для выбора локальной папки web-cauma 


> В открывающемся списке Select (Выбор) выберите диск и папку, в которой бу- 
дут сохранены файлы проекта. 


> Нажмите кнопку Сохранить (Save). Диалог Choose local годе folder for site 
Site1 (Выберите локальную корневую папку для сайта Sitel) закроется, и на 
экране снова появится диалог Site Definition for Site1 (Определение для 
сайта Sitel). 


В поле ввода Where оп your computer do you want to store your files? (Где на 
вашем компьютере вы хотите сохранить ваши файлы?) появится полный путь к 
выбранной папке. Все файлы, которые будут использованы в проекте сайта, не- 
обходимо сохранять в указанную папку. 


> Нажмите кнопку Next (Далее). Содержимое диалога Site Definition for Site1 
(Определение для сайта Sitel) изменится (Рис. 1.26). 
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Site Definition for Si 


Editing Files Testing Files Sharing Files 


How do you connect to your remote server? 


None а 


Рис. 1.26. Диалог мастера создания сайта — шаг четвертый 


На этом шаге создания проекта требуется выбрать вариант подключения к уда- 
ленному серверу. Так как наш проект сохранен на локальном диске и в настоя- 
щее время размещаться на сервере не будет, выполните следующее действие. 


> В открывающемся списке How do you connect to your remote server? (Как 
вы подключаетесь к вашему удаленному серверу) выберите значение None (От- 
сутствует). 


Выбранное значение означает, что в настоящий момент времени у вас нет под- 
ключения к удаленному серверу. К настройке этого параметра вы всегда сможе- 
те вернуться позже, когда придет время размещать сайт в Интернете. Админист- 
ратор выбранного web-cepBepa предоставит вам все необходимые данные для 
размещения, и вы сможете выбрать подходящее значение. 


> Нажмите кнопку Next (Далее). В диалоге Site Definition for Site1 (Определение 
для сайта Sitel) появится информация для проверки правильности всех введен- 
ных данных (Рис. 1.27). 
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Summary 


Your site has the following settings: 


Local info: 
Site Name: Site1 
Local Root Folder: C:\Documents and Settings\Alexey\Mon gokymenrbi\Sitel \ 


Remote info: 
Access: I'll set this up later. 


Testing server: 
Access: I'll set this up later. 


Your site can be further configured using the Advanced Tab. 


| Ce Cae Сны 


Рис. 1.27. Заключительный диалог мастера создания сайта 


> Нажмите кнопку Done (Сделано). Диалог Site Definition for Site1 (Определение 
сайта для Sitel) будет закрыт, а в главном окне программы Macromedia Dream- 
weaver появится новая Web-cTpaHHa. 


Обратите внимание, что на вкладке Files (Фай- 
лы) панели инструментов Files (Файлы) появи- 
лось название вашего web-calita (Рис. 1.28). 
По мере работы над проектом, каждая создан- 
ная меб-страница будет отображена в виде вет- 
ви этого иерархического списка. 


Панель инструментов Files (Файлы) позволя- 
ет открывать, удалять, переименовывать и 
перемещать \меб-страницы. По мере необхо- 
димости мы рассмотрим возможности этой 
панели инструментов. 


> Выберите команду меню File Save 
(Файл+ Сохранить). На экране появится 
диалог Save as (Сохранить как) (Рис. 1.20). 


) 1 local items selected tota 


> Сохраните меб-страницу, как описывалось РИ. 1.28. Панель ИРИНЕ 
ранее, в файл с именем Index. Files (Файлы) 
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Таким образом, первая страница нашего сайта сохранена. 


Название файла Index обозначает, что данная web-cmpaHuua бу- 
дет загружена первой при запуске вашего сайта. 


В этом разделе вы освоили процедуру создания \Меб-сайтов. Для программы 
Macromedia Dreamweaver м/еб-сайт является своего рода отдельным проектом, 
позволяющим работать с множеством страниц как с единым целым. Таким обра- 
зом, появляется возможность создавать не только отдельные \меб-страницы, но и 
целые м/еб-сайты, используя средства программы Macromedia Dreamweaver. 


Изменяем свойства м/еб-страницы 


Создавая собственные меБ-страницы, вам без сомнения захочется сменить цвет 
фона, цвет текста, размер шрифта и многие другие параметры. Рассмотрим по 
порядку наиболее интересные и важные свойства меб-страницы. 


> Откройте ранее сохраненный файл с именем Index.html, как описывалось ранее. 
В главном окне программы Macromedia Dreamweaver появится первая web- 
страница нашего проекта. 


> Нажмите кнопку Page Properties (Свойства страницы), расположенную Ha па- 
нели инструментов Properties (Свойства). На экране появится диалог Page 
Properties (Свойства страницы) (Рис. 1.29). 


Pape Properties 


Category Appearance 


Tracing Image en Г: 7 
Background color: ee . 


Left margin: [ем] Right margin: | 
Top margin: [рев] Bottom margin: = 


= 


Puc. 1.29. Диалог Page Properties (Свойства страницы), 
открытый на вкладке Appearance (Внешний вид) 
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Диалог появится открытым на вкладке Арреагапсе (Внешний вид). На этой 
вкладке расположены элементы управления для изменения размера и цвета тек- 
ста, цвета фона, а также настройки фоновой картинки и отступов. Изменим 
свойства шрифта текста. 


> В открывающемся списке Page Font (Шрифт страницы) выберите группу шриф- 
тов, например Arial, Helvetica, sans-serif. 


Стоит отметить, что вы можете выбрать лишь группу шрифтов, a не отдельный 
шрифт. Это связанно с тем, что если один из указанных шрифтов отсутствует 
на компьютере посетителя вашей меб-страницы, то обозреватель Интернета 
автоматически подставит следующий из группы. В результате, тщательно про- 
думанный дизайн вашей меб-страницы не будет искажен из-за отсутствия не- 
обходимого шрифта. | 


> Нажмите кнопку | B | Начертание шрифта изменится и станет полужирным. 


> Нажмите кнопку [1] Начертание шрифта изменится и станет курсивным. 


Вы можете использовать сразу два варианта начертания, например, полуэжир- 
ный курсивный; а также и один — например, курсивный обычный. 


> Нажмите кнопку Г. расположенную в группе элементов управления Text color 
(Цвет текста). На экране появится палитра с образцами цветов. 


> Щелкните мышью на подходящем цвете. Палитра закроется, а цвет шрифта 
будет изменен. 


Изменение цвета фона web-cmpaHuubl, на котором будет размещен 
текст, выполняется таким же образом, как и выбор цвета шрифта. 
Разница лишь в том, что для изменения цвета нужно использовать 
элементы управления группы Background color (Цвет фона). 


Экспериментируя с сочетаниями цветов, старайтесь, чтобы 
текст оставался легко читаемым. 


В качестве фона мы можем выбрать не только цвет, но и какой-нибудь рису- 
нок. Стоит отметить, что Ha меб-страницах чаще всего используют рисунки 
форматов GIF, JPEG или РМС, потому что не все меб-браузеры поддерживают 
другие форматы. Итак, чтобы выбрать в качестве фона рисунок, выполните 
следующие действия. 


> Нажмите кнопку Browse (Обзор) в группе Background Image (Изображение 
фона). На экране появится диалог Select Image Source (Выбор источника изо- 
бражения) (Рис. 1.30). 


> В открывающемся списке Папка (Folder) выберите диск и папку, в которой на- 
ходится графический файл. 
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Select Image Source 


Select file name from: (> File system Cans andl СВАИ 


©) Data sources 


Image preview 


Тип файлов: | Image Files (*.gif:”.ipg:*.ipeg:*.png) 


Relative to: Untitled Document 


Change default Link Relative To in the site definition. 


Document should be saved to use this option. Preview images 


Рис. 1.30. Диалог Select Image Source 
(Выбор источника изображения) 


> Выберите подходящий файл. В поле ввода Имя файла (File name) появится имя 
выбранного файла, а в правой части диалога Select Image Source (Выбор источ- 
ника изображения) в группе Image preview (Предварительный просмотр 
изображения) появится рисунок. 


> Щелкните мышью на кнопке ОК. Диалог Select Image Source (Выбор источника 
изображения) закроется. 


Если вы выбрали файл с рисунком из папки проекта, тогда вы перейдете к диа- 
логу Page Properties (Свойства страницы). Если же вы выбрали файл с рисун- 
ком из какой-либо другой папки, программа Macromedia Dreamweaver предло- 
жит вам скопировать файл с рисунком в папку проекта (Рис. 1.31). 
oe ee 
This file is outside of the root folder of site ‘Site1', 
and may not be accessible when you publish the site. 


Your root Folder is: 


C:\Document and Setting\Alexey\Mon документы\5Ке1\ 


Would you like to copy the file there now? 


| Да | Нет 


Рис. 1.31. Запрос на сохранение файла в папку проекта 


> Щелкните мышью на кнопке Да (Yes). На экране появится диалог Copy File As 
(Копировать файл как) (Рис. 1.32). 
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Copy File As 
> Sitel 
(0) index.html 


Имя Файла: | picture.jpg 
Тип файла: | All Files (*.*) У 


Рис. 1.32. Диалог Copy File As (Копировать файл как) 


> Нажмите кнопку Сохранить (Save). Диалог Copy File As (Копировать файл 
как) закроется, и вы перейдете к диалогу Page Properties (Свойства страницы). 


В поле ввода Background image (Изображение фона) появится имя выбранного 
файла. В открывающемся списке Repeat (Повторение) вы можете выбрать пара- 
метры отображения фонового рисунка на меб-странице: 


Y При выборе значения no-repeat фоновый рисунок отобразится один раз, не- 
зависимо от размера меб-страницы, а оставшаяся область страницы закрасит- 
ся цветом, выбранным в качестве цвета фона; 


Y При выборе значения repeat фоновый рисунок будет повторяться таким об- 
разом, чтобы отображаться на всем протяжении ме-страницы; 


Y При выборе значения repeat-x фоновый рисунок будет повторяться лишь 
горизонтально; 


( При выборе значения repeat-y фоновый рисунок будет повторяться лишь 
вертикально. 


Например, сделаем так, чтобы фоновый рисунок повторялся на протяжение всей 
меб-страницы. 


> В открывающемся списке Repeat (Повторение) выберите значение repeat. 


С внешним видом \Меб-страницы мы разобрались, и теперь нашим следующим 
шагом будет настройка внешнего вида ссылок. 


> Перейдите на вкладку Links (Ссылки), расположенную в диалоге Page 
Properties (Свойства страницы). Содержимое диалога Page Properties (Свойст- 
ва страницы) изменится (Рис. 1.33). 
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Page Properties 


Category 


ee Link Font: | (Same as page font) 

THe Encoding [У [ее У] 

nee ee Link color: Г: es Rollover links: е И 
Visited links: fa [| Active links: Г. Е 


= 


Рис. 1.33. Диалог Page Properties (Свойства страницы), 
открытый на вкладке Links (Ссылки) 


На этой вкладке расположены элементы управления для изменения шрифта, 
размера и цвета текста ссылок. Настройка свойств ссылок происходит таким же 
образом, как изменение обычного текста, рассмотренного ранее. Также на этой 
вкладке присутствуют элементы управления для изменения некоторых других 
CBOHCTB ССЫЛОК: 


и 


Link color (Цвет ссылки) — позволяет выбрать цвет неактивной ссылки, по 
которой посетитель еще не переходил; 


Visited links (Посещенная ссылка) — позволяет выбрать цвет ссылки, посе- 
щенной гостем вашего сайта; 


Revolver links (Нажимаемая ссылка) — позволяет выбрать цвет ссылки, на 
которой в данный момент щелкают мышью; 


Active links (Активная ссылка) — позволяет выбрать цвет ссылки, на которую 
установлен указатель мыши; 


Открывающийся список Underline Style (Стиль подчеркивания) позволяет 
выбрать вариант подчеркивания ссылки. Рекомендуется оставить значение, 
указанное по умолчанию — Always Underline (Всегда подчеркивать). 


Изменяя свойства внешнего вида ссылок, помните, что они должны привлекать 
внимание и не сливаться с обычным текстом \меб-страницы. 


Теперь мы перейдем к настройке внешнего вида заголовков. 


> 


Перейдите на вкладку Headings (Заглавия), расположенную в диалоге Page 
Properties (Свойства страницы). Содержимое диалога Page Properties (Свойст- 
ва страницы) изменится (Рис. 1.34). 
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Page Properties 


Category Headings 


Appearance 
ie Heading font: | (Same as page font) 


Tile Encoding Heading 1 
Tracing Image ier ee 


Cx Cee) Coe 


Рис. 1.34. Диалог Page Properties (Свойства страницы), 
открытый на вкладке Headings (Заглавия) 


На вкладке Headings (Заглавия) диалога Page Properties (Свойства страницы) 
можно изменить шрифт для всех уровней заголовков, а также указать размеры 
шрифта для каждого уровня в отдельности. Кроме того, вы можете выбрать цвет 
для каждого уровня заголовков. Мы не будем вносить изменения во внешний 
вид заголовков, а перейдем к следующему шагу и укажем название web- 
страницы, которое будет отображаться в заголовке обозревателя Интернета. 


> Перейдите на вкладку Title/Encoding (Название/Кодировка), расположенную в 
диалоге Page Properties (Свойства страницы). Содержимое диалога Page 
Properties (Свойства страницы) изменится (Рис. 1.35). 


Pave Properties 


Category Title/Encoding 


Title: | Untitled Document 
Document Туре (DTD): |НТМЕ 4.01 Transitional v 


Encoding: |Кириллица (Windows) lv 


Unicode Normalization Form: 


Tracing Image 


[Include Unicode Signature (BOM) 


Document folder: ...ents and Settings\Alexey\Mon AokymeHTpi\site 1 \ 
Site folder: ...ents and Settings\Alexey\Mon AokymenTpi\site 1 \ 


| Cera) Са 


Puc. 1.35. Диалог Page Properties (Свойства страницы), 
открытый на вкладке Title/Encoding (Название/Кодировка) 
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> В поле ввода Title (Название), введите название меб-страницы, например Моя 
первая м/еБ-страница. 


Остальные параметры на этой вкладке изменять не рекомендуется, так как 
необходимые значения были установлены ранее. 


Далее перейдем к следующей вкладке, на которой мы можем выбрать интерес- 
ный вариант отображения фонового рисунка. 


> Перейдите на вкладку Tracing images (Трассировка изображения), расположен- 
ную в диалоге Page Properties (Свойства страницы). Содержимое диалога Page 
Properties (Свойства страницы) изменится (Рис. 1.36). 


Page Properties 


Category Tracing Image 


Appearance Е Ш о _ 
Links Tracing image: | ИЕ Browse... 


Headings 
Title {Encoding LATED STEN, en 100% 
Tracing Image 


Transparent Opaque 


тт 


Рис. 1.36. Диалог Page Properties (Свойства страницы), 
открытый на вкладке Tracing Image (Трассировка изображения) 


На данной вкладке у вас есть возможность выбрать фоновый рисунок, который 
растянется на всю ширину окна обозревателя Интернета и будет повторяться 
вертикально до конца меб-страницы. Также мы можем выбрать значение про- 
зрачности фонового рисунка. 


> Щелкните мышью на кнопке Browse (Обзор) в группе Tracing image (Трасси- 
ровка изображения). На экране появится диалог Select Image Source (Выбор ис- 
точника изображения). 


> В поле ввода Папка (Folder) выберите диск и папку, в которой находится необ- 
ходимый файл. 


> Выберите необходимый файл. В поле ввода Имя файла (File name) появится 
имя выбранного файла. 


> Щелкните мышью на кнопке ОК. Диалог Select Image Source (Выбор источника 
изображения) закроется. 
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Выбор файла рисунка на вкладке Tracing Image (Трассировка 
изображения) выполняется точно также, как и выбор рисунка для 
фона на вкладке Арреагапсе (Внешний вид). То есть, если файл 
рисунка расположен в папке, отличной от папки проекта, про- 
грамма Macromedia Dreamweaver предложит скопировать файл в 
папку проекта. В этом случае щелкните мышью на кнопке Да 
(ОК), чтобы сохранить выбранный файл в папке проекта. 


С помощью переключателя Transparency (Прозрачность) мы можем установить 
прозрачность фонового рисунка. Например, сделаем фоновый рисунок прозрач- 
ным наполовину. 


> Установите ползунковый регулятор Transparency (Прозрачность) на значение 
50%. 


После того, как вы изменили свойства страницы в диалоге Page Properties 
(Свойства страницы), изменения, которые вы внесли, нужно применить. 


> Нажмите кнопку ОК диалога Page Properties (Свойства страницы). Диалог Page 
Properties (Свойства страницы) будет закрыт, и изменения вступят в силу. 


Название И/еб-страницы, которое будет отображаться в заголовке 
обозревателя Интернета, также можно указать в поле ввода ТШе 
(Название), расположенном на панели инструментов документа. 


Мы рассмотрели принципы изменения наиболее важных свойств меб-страниц и 
в дальнейшем вы сможете оформлять Меб-страницы согласно своему вкусу уже 
самостоятельно. 


Вволим на м/е-страницу текст 


Текст на меб-страницу вводится таким же образом, как и в любом текстовом 
редакторе в операционной системе Windows, таком как Блокнот (Notepad) или 
WordPad. На первой странице меб-сайта можно разместить приветствие для по- 
сетителей, зашедших посмотреть на вашу страницу. 


> Щелкните мышью в окне файла Index.html, загруженного в программу Масго- 
media Dreamweaver. В окне документа появится текстовый курсор, указываю- 
щий на позицию, в которой появится очередной, введенный вами, символ. 


> Введите несколько строк текста, например, приветствия пользователям, которые 
увидят вашу страницу в Интернете. 
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Не отчаивайтесь, если вы совершили ошибку в слове. Вы можете 
переместить текстовый курсор с помощью клавиш [=], (tJ, (4 и 


Ы. Кроме того, можно щелкнуть мышью в позиции, в которую 


требуется переместить текстовый курсор. А затем удалить 
ошибочный символ и ввести новый. Если необходимо удалить сим- 
вол, стоящий слева от текстового курсора, нажмите клавишу 


[[eescapace] Если необходимо удалить символ, стоящий справа от 
текстового курсора, нажмите клавишу |Pee} 


Достаточно часто фрагменты текста требуется перемещать, копировать и встав- 
лять. Для этого необходимо сначала выделить необходимый фрагмент, а затем 
выбрать нужную команду меню. Мы скопируем фрагмент текста и вставим его в 
другую область страницы. 


> 


> 


Установите указатель мыши в начале выделяемого фрагмента текста. 


Нажав и удерживая кнопку мыши, установите указатель мыши в конце фрагмен- 
та. Фрагмент текста будет выделен темным цветом. 


Отпустите левую кнопку мыши. 


Выберите команду меню Edit + Copy (Правка + Копировать). Выделенный 
фрагмент текста будет скопирован в буфер обмена. 


Установите текстовый курсор в позицию, в которую необходимо вставить 
фрагмент. 


Выберите команду меню Edit + Paste (Правка + Вставить). Копия фрагмента 
текста будет вставлена в позицию текстового курсора. 


Вы также можете перемещать выделенный фрагмент текста. 
В этом случае вам потребуется использовать команду Cut (Вы- 
резать), чтобы скопировать фрагмент текста в буфер обмена и 
удалить из исходной позиции. После чего фрагмент текста мож- 
но вставить в выбранную позицию с помощью команды меню 
Edit + Paste (Правка + Вставить). 


Обращаем ваше внимание, что те же команды меню действуют и в большинстве 
других текстовых редакторов для операционной системы Windows. Таким обра- 
зом, вы легко сможете освоить принципы ввода текста в программе Macromedia 
Dreamweaver. 
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Форматируем текст 


Форматирование текста представляет собой процедуру изменения свойств тек- 
ста, таких как шрифт, цвет, размер и некоторых других. Форматирование текста 
выполняется с помощью элементов управления, расположенных на панели ин- 
CTpyMeHTOB Properties (Свойства). 


Начнем с создания заголовка. Kak правило, вверху меб-страницы располагается 
заголовок, который бросается в глаза и несет в себе функцию заинтересовать 
посетителя. Таким образом, мы сместим ранее введенный текст на строку ниже, 
и создадим заголовок Меб-страницы. 


> Установите текстовый курсор в начало первого абзаца. 


> Нажмите клавишу Enter], Абзац сместится ниже. 


Установите текстовый курсор в самое начало \\еБ-страницы. 
Введите какой-нибудь текст, например Моя первая меБ-страница. 


‚> В открывающемся списке Format (Формат), расположенном на панели инстру- 
ментов Properties (Свойства), выберите значение Heading 1 (Заглавие 1). Строка 
с текстом Моя первая ммеБ-страница станет заголовком первого уровня. 


Вы можете создавать заголовки вплоть до шестого уровня. 


Заголовки различного уровня отличаются размером шрифта. 
Обычно заголовком первого уровня форматируют название web- 
страницы, так как данный заголовок имеет наибольший размеб 
тем самым сразу заметен на иеб-странице. Заголовком второ- 
го уровня выделяют какой-либо раздел меБ-страницы, треть- 
им — подраздел иеб-страницы и так далее, по убыванию значи- 
мости заголовка. 


В случае, если требуется превратить заголовок обратно в обычный 
текст, необходимо в открывающемся списке Format (Формат) на 
панели инструментов Properties (Свойства) выбрать значение 
Paragraph (Абзац). Выделенный абзац текста примет обычный вид. 


Теперь самое время рассмотреть способы выравнивания текста. Текст может быть 
выровнен по правому краю, по левому краю, по центру или по ширине. Если ни 
один из вариантов не выбран, текст при отображении будет выровнен в зависимо- 
сти от настроек обозревателя Интернета, обычно по левому краю. Стоит отметить, 
что вариант выравнивания по ширине поддерживается не всеми программами — 
обозревателями Интернета. Мы отформатируем абзац текста, расположенный сра- 
зу после заголовка, применив вариант выравнивания по центру. 
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Нажмите кнопку Е расположенную на панели инструментов Properties 
(Свойства). Абзац текста будет выровнен по центру. 


Также вы можете выбрать и другой вариант выравнивания: 


и 


и 


и 


Выравнивание по левому краю, осуществляющееся нажатием кнопки Е: 
Выравнивание по правому краю, осуществляющееся нажатием кнопки |= 


Выравнивание по ширине, осуществляющееся нажатием кнопки El 


Абзац текста, который мы только что выровняли, мы подвергнем дальнейшему 
форматированию, изменяя другие свойства, такие как шрифт, размер и цвет. Гаким 
образом текст можно сделать более понятным, запоминающимся и легко читаемым. 


Сначала следует выделить фрагмент текста, шрифт которого вы хотите изменить. 


> 


> 


Выделите абзац текста, выровненный нами ранее. 


В открывающемся списке Font (Шрифт), расположенном на панели инструмен- 
тов Properties (Свойства), выберите значение Verdana, Arial, Helvetica, sans- 
serif. Согласно выбранной группе шрифтов, шрифт выделенного абзаца текста 
будет изменен. 


Нажмите кнопку | B | расположенную Ha панели инструментов Properties 
(Свойства). Шрифт выделенного абзаца текста станет полужирным. 


Выберите в открывающемся списке Size (Размер), расположенном на панели 
инструментов Properties (Свойства), значение 18. Шрифт выделенного абзаца 
текста станет более крупным. 


рументов Properties (Свойства). На экране появится палитра, служащая для вы- 
бора цвета шрифта. 


Щелкните мышью на образце с понравившимся цветом в палитре. Шрифт выде- 
ленного абзаца текста изменит свой цвет согласно выбранному оттенку. 


Мы рассмотрели основные приемы форматирования текста, более подробно с 
которыми вы познакомитесь в процессе уже самостоятельного изучения про- 
граммы. А сейчас мы рассмотрим приемы создания, пожалуй, одного из самых 
значимых элементов, располагаемых Ha меб-страницах — списка. 
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Созлаем список 


Списки бывают двух видов: маркированный и нумерованный. В маркированном 
списке каждый пункт начинается с определенного символа. В нумерованном 
списке каждый пункт начинается с порядкового номера, причем номер может 
быть указан арабскими, римскими, а также латинскими цифрами. 


Для создания списка на панели инструментов Properties (Свойства) расположе- 
ны следующие кнопки: 


и Unordered List (Ненумерованный список), нажатие на которую, позволя- 
ет создать нумерованный список; 


и Ordered List (Нумерованный список), нажатие на которую, позволяет 
создать маркированный список. 


Выделим два абзаца текста, расположенных на нашей м!еб-странице, и создадим 
_ ИЗ НИХ СПИСОК. 


> Выделите два отдельно стоящих абзаца текста, расположенные под заголовком 
\миеб-страницы. 


> Нажмите кнопку Ordered List (Нумерованный список), расположенную на 
панели инструментов Properties (Свойства). Выделенный текст будет примет 
вид нумерованного списка. 


Нумерация абзацев текста осуществляется по порядку, поэтому первый абзац 
текста имеет порядковый номер 1, а второй абзац - 2. 


Некоторые свойства списка можно изменить. 


> Установите текстовый курсор в любой позиции списка. На панели инструментов 
Properties (Свойства) станет активной кнопка List Item (Пункт списка). 


> Нажмите кнопку List Item (Пункт списка). На экране появится диалог List Ргор- 
erties (Свойства списка) (Рис. 1.37). 


List Properties 


List type: | Bulleted List м ae 
Style: | [Default] Sf 


List item 


New style: | [Default] У 
Reset count to: oe eee ay (Number) 


Рис. 1.37. Диалог для изменения свойств списка 


В диалоге List Properties (Свойства списка) вы можете изменить тип списка. 
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> В открывающемся списке List type (Тип списка) выберите значение Bulleted List 
(Маркированный список). Созданный список станет маркированным. 


В открывающемся списке List type (Тип списка) вы также можете выбрать 
следующие значения: 


и Directory List (Список-указатель) — разновидность маркированного списка, 
используется в том случае, если в списке очень короткие пункты; 


и Menu List (Список-меню) — также разновидность маркированного списка, 
используется для создания различных меню. 


В открывающемся списке Style (Стиль) вы можете выбрать стиль списка. 
Содержание открывающегося списка Style (Стиль) зависит от выбранного типа 
списка. В случае, если выбрано значение Bulleted List (Маркированный список), 
открывающийся список Style (Стиль) содержит следующие значения: 


и Bullet (Пуля) — маркер списка принимает вид круга; 
Y Square (Квадрат) — маркер списка принимает вид квадрата; 


и Default (По умолчанию) — маркер списка принимает вид согласно установкам 
обозревателя Интернета. 


В случае, если в открывающем списке List Туре (Тип списка) выбрано значе- 
ние Numbered List (Нумерованный список), вы можете выбрать следующие 
стили нумерации: 


и Number (Число) — арабские цифры; 

VY Roman Small (Римские маленькие) — малые римские цифры; 

и’ Roman Large (Римские большие) — большие римские цифры; 

и’ Alphabet Small (Маленький алфавит) — малые латинские буквы; 
Y Alphabet Large (Большой алфавит) — большие латинские буквы. 


Кроме того, для нумерованного типа списка вы можете указать число, с которо- 
го необходимо начинать нумерацию. Для этого введите число в поле ввода Start 
count (Стартовое значение). 


В группе элементов List item (Пункт списка) вы можете изменить параметры 
пункта списка, в позиции которого стоит текстовый курсор. 


Если список маркированный, для выбранного пункта вы можете выбрать маркер 
из списка New style (Новый стиль). 


Если список нумерованный, в открывающемся списке New style (Новый стиль) 
вы можете выбрать стиль нумерации для выбранного пункта списка. Кроме того, 
становится доступным поле ввода Reset count to (Восстановить счет с). Значе- 
ние, которое вы укажете в поле ввода Reset count to (Восстановить счет с), ста- 
нет номером выбранного пункта. 
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> Нажмите кнопку ОК. Изменения будут приняты, и список изменит свой вид в 
соответствии с указанными параметрами. 


Освоив основные принципы работы со списками, мы уже можем создавать web- 
страницы с разнообразным текстовым содержимым. Теперь можно переходить и 
к рассмотрению способа навигации по меб-страницам и меб-сайтам. 


Помещаем на страницу ссылки и гиперссылки 


Web-caiiT представляет собой множество меб-страниц, связанных друг с другом 
с помощью гиперссылок. А чтобы пользователи имели возможность загрузить с 
web-calita какие-либо файлы, на страницах используют гиперссылки. Таким об- 
разом, гиперсылки — это способ связи \меб-страниц с файлами, с другими web- 
страницами и сайтами. 


В случае если меб-страница содержит большой объем информации, удобнее в 
начале иметь небольшое оглавление, щелкнув мышью на пунктах которого, 
можно переместиться к требуемому месту на странице. Такое оглавление можно 
создать с помощью ссылок. 


Ссылки и гиперссылки обычно выделяются среди текста цветом и подчеркива- 
нием. Указатель мыши при установке на ссылку или гиперссылку принимает 
вид руки. С помощью ссылок и гиперссылок Ha меб-сайтах обеспечивают удоб- 
ную навигацию, чтобы помочь пользователям быстро и легко находить необхо- 
димую информацию. 


Созлание ссылки 


Часто бывает, что меб-страница содержит большой объем текста, просмотр ко- 
торой для поиска нужного фрагмента текста может занять достаточно много 
времени. Чтобы упростить поиск, вы можете расположить в начале страницы 
краткое содержание, содержащее ссылки на определенные фрагменты в тексте. 
Рассмотрим процедуру создания ссылки, которая будет вести на указанную 
часть \еб-страницы. 


Для создания такой ссылки необходимо поместить на \меб-страницу якорь. 
Якорь представляет собой элемент, которым отмечается определенная позиция 
миеб-страницы. 


> Установите текстовый курсор в начало абзаца текста, на который будет вести 
ссылка. 


> Нажмите кнопку Named Anchor (Именованный якорь), расположенную на 
панели инструментов Insert (Вставка). На экране появится диалог Named 
Anchor (Именованный якорь) (Рис. 1.38). 
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PLETED ть aoe РРР РРРРррЯрЫ 


Named Ancho 


Рис. 1.38. Диалог для ввода имени якоря 


Введите в поле ввода Anchor name (Имя якоря) название якоря, например text. 


Нажмите кнопку ОК. Диалог Named Anchor (Именованный якорь) закроется, а в 


позиции текстового курсора появится символ якоря * a 


После Toro как якорь создан, приступим к процессу создания ссылки, которая 
будет вести к установленному якорю. 


> 


> 


В 


Установите текстовый курсор в позицию, в которую необходимо вставить 
ссылку. 


Выберите команду меню Insert + Hyperlink (Вставка + Гиперссылка). На экране 


Link: vil СЭ 
`` 


Target: | | 
Access key: С | 
Tab index: ee 


Puc. 1.39. Диалог для ввода параметров ссылок и гиперссылок 
Введите в поле ввода Text (Текст) диалога Hyperlink (Гиперссылка) текст, опре- 
деляющий содержание ссылки, например Ссылка на первый абзац. 


В открывающемся списке Link (Ссылка) выберите значение с названием якоря, 
в нашем случае это Чехи. 


В поле ввода Те (Название) введите текст, который будет отображаться в виде 
всплывающей подсказки, при установке указателя мыши на ссылку, например 
Моя первая ссылка. 


открывающемся списке Target (Цель) диалога Hyperlink (Гиперссылка) вы 


можете выбрать параметры окна, в котором загрузится ссылаемая ме-страница. 
Например, значение _ blank (Бланк) позволяет открывать \Меб-страницу в новом 
окне обозревателя Интернета; а значение _self (Себя), — в текущем окне. 
Последнее значение используется по умолчанию. 
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> Нажмите кнопку ОК. Диалог Hyperlink (Гиперссылка) закроется, а в позиции 
текстового курсора появится ссылка Ссылка на первый абзац. 


Далее самостоятельно создайте на своей меб-странице ссылки на все ключевые 
позиции текста так, чтобы пользователи могли быстро перемещаться по страни- 
це в поисках нужной информации. 


А чтобы создавать полноценные Web-caliTbI, с большим количеством мер-страниц, 
которые будут связаны между собой, мы освоим приемы работы с гиперссылками. 


Созлание гиперссылки 


Гиперссылки имеют большое значение для меб-страниц. С помощью гиперссы- 
лок М\еб-страницы объединяются в единые сайты. Хорошо продуманная струк- 
тура гиперссылок может существенно улучшить навигацию по web-cality, тем 
самым упростив для пользователей процесс поиска необходимой информации. 


Создать гиперссылку в программе Macromedia Dreamweaver можно, выполнивы 
следующие действия. 


> Установите текстовый курсор в позицию, в которую необходимо вставить ги- 
перссылку. 


> Выберите команду меню Insert + Hyperlink (Вставка + Гиперссылка). На экране 
появится диалог Hyperlink (Гиперссылка) (Рис. 1.39). 


> Введите в поле ввода Text (Текст) в диалоге Hyperlink (Гиперссылка) текст ги- 
перссылки, например, Сайт разработчиков программы. 


Теперь нужно указать адрес меб-страницы в Интернете, на которую можно Oy- 
дет перейти по созданной нами ссылке. Обратите внимание, что открывающийся 
список Link (Ссылка) является в то же время и полем ввода. 


> Введите в поле ввода Link (Ссылка) адрес меб-страницы в Интернете, на кото- 
рую будет вести гиперссылка, например http://www.macromedia.com. 


Таким образом, щелкнув мышью на данной ссылке, вы попадете на сайт компа- 
нии Macromedia, разработавшей описываемую программу. 


В случае, если нужно создать гиперссылку на локальный файл или же другую 
страницу вашего сайта, вы можете воспользоваться кнопкой (>, расположенной 
справа от поля ввода Link (Ссылка). 


> Нажмите кнопку [->, расположенную в диалоге Hyperlink (Гиперссылка). 
На экране появится диалог Select File (Выбор файла) (Рис. 1.40). 
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Select File 


Select file name from: ©) File system Cts an Cais 


> Data sources 


Тип файлов: [А Files (*.") v | 


URL (Parameters. 
Relative to: ex] .html 


Change default Link Relative To in the site definition. 


Рис. 1.40. Диалог Select File (Выбор файла) 


> В открывающемся списке Папка (Folder) выберите диск и папку, в которой 
расположен требуемый файл. 


> Выберите требуемый файл. В поле ввода Имя файла (File name) появится имя 
выбранного файла. 


> Нажмите кнопку ОК диалога Select File (Выбор файла). Диалог Select File 
(Выбор файла) закроется, a на экране снова появится диалог Hyperlink (Гипер- 
ссылка). 


В случае, если вы выбрали файл, находящийся в папке, отличной 
от директории с файлами проекта, на экране появится диалог с 
запросом о копировании файлов. Нажмите кнопку Да (OK), чтобы 
сохранить выбранный файл в папку проекта. 


> В поле ввода Title (Название) диалога Hyperlink (Гиперссылка) введите текст, 
который будет отображаться в виде всплывающей подсказки, при установке ука- 
зателя мыши на ссылку, например Эта ссылка ведет на сайт компании Мас- 
romedia. 


Вы также можете использовать дополнительные параметры гиперссылки. 
Для этого из открывающегося списка Target (Цель) можно выбрать одно из зна- 
чений. Сделаем так, чтобы при щелчке на гиперссылке сайт компании 
Macromedia открывался в новом окне. 


> В открывающемся списке Target (Цель) диалога Hyperlink (Гиперссылка), выбе- 
pute значение _blank (Бланк). При переходе по ссылке страница будет откры- 
ваться в новом окне. 
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> Нажмите кнопку ОК. Диалог Нурейтк (Гиперссылка) закроется, а в позиции 
текстового курсора появится ссылка Сайт разработчиков программы. 


После того как текущая меб-страница будет загружена в окне обозревателя Ин- 
тернета, гиперссылка станет активна. При установке указателя мыши на гипер- 
ссылку появится всплывающая подсказка Эта ссылка ведет на сайт компании 
Macromedia, а после нажатия кнопки мыши в новом окне обозревателя Интер- 
нета появится главная страница компании Macromedia. 


> Чтобы навигация по вашему меб-сайту была удобнее, с помощью гиперссылок 
страницы сайта можно связать друг с другом. А благодаря программе Масготе- 
dia Dreamweaver, создание гиперссылок станет простым и удобным занятием. 


Заключение 


В этой главе мы познакомились с базовыми принципами создания меБ-страниц 
и web-caliTosB. Рассмотренные алгоритмы часто применяются в процессе созда- 
ния \М/еб-страниц. Используя опыт, полученный в этой главе, вы уже сможете 
создать свою первую страничку в Интернете, содержащую красиво оформлен- 
ный текст, а также нумерованные и маркированные списки. Кроме того, вы мо- 
жете разместить на сайте ссылки и гиперссылки, тем самым создавая объеди- 
ненные между собой меБ-страницы, облегчая навигацию по вашему детищу. 


В следующей главе мы OCBOHM работу С таблицами, познакомимся с вариантами 
использования таблиц, B том числе для создания табличного дизайна. 


ГЛАВА 2 
Вволим на ме-страницу таблицы 


В этой главе мы познакомимся с приемами размещения таблиц на web- 
страницах. Кроме удобного и компактного способа размещения большого коли- 
чества информации Ha \ме-страницах, таблицы применяют и для оформления. 
Главное достоинство таблиц — возможность точно указать место расположения 
различных элементов оформления, которые не сдвинутся при уменьшении ши- 
рины окна обозревателя Интернета. Мы рассмотрим способы создания, оформ- 
ления и применения на \еб-страницах таблиц средствами программы 
Macromedia Dreamweaver. 


Co3AaeM таблицы 


Программа Macromedia Dreamweaver позволяет легко создавать таблицы в 
несколько шагов. Мы создадим простую таблицу, для чего следует выполнить 
следующие действия. 


> Установите текстовый курсор в позицию документа, в которой будет размеще- 
на таблица. 


> Щелкните мышью на кнопке Table (Таблица), которая находится на пане- 


ли инструментов Insert (Вставка). На экране появится диалог Table (Таблица) 
(Рис. 2.1). 


Table size 


Rows: Columns: 
Table width: 
Border thickness: pixels 
Cell padding: a ЕН 
Cell spacing: [| iss 


Header 


Accessibility 
Align caption: |default м 


Summary: 


Puc. 2.1. Диалог Table (Таблица), служащий для создания таблицы 


Вводим на ме-страницу таблицы 47 


В диалоге Table (Таблица) расположены элементы управления для настройки 
параметров создаваемой таблицы, таких как количество строк и столбцов, ши- 
рина таблицы, размеры границ и некоторые другие. Рассмотрим подробнее каж- 
дый из доступных параметров. 


В верхней части диалога Table (Таблица), в группе элементов управления Table 
Size (Размер таблицы), расположены поля ввода текста Rows (Строки) и 
Columns (Столбцы), предназначенные для указания количества строк и столб- 
цов, из которых будет состоять таблица. 


> Введите в поле ввода текста Rows (Строки) количество строк, например 5. 


> Введите в поле ввода текста Columns (Столбцы) количество столбцов, 
например 5. 


В дальнейшем столбцы и строки можно будет добавить или удалить. 


Ниже расположено поле ввода текста Table width (Ширина таблицы), предна- 
значенное для указания ширины таблицы. Значение ширины таблицы может 
быть задано в пикселах или в процентах. Стоит отметить, что значение ширины, 
заданное в пикселах, называется фиксированным, так как оно постоянно, неза- 
висимо от ширины окна обозревателя Интернет. Значение ширины, заданное в 
процентах, называется относительным, так как изменяется в зависимости от ши- 
рины окна обозревателя Интернета. Значение ширины указывается в поле ввода 
текста Table width (Ширина таблицы), а единица измерения ширины выбирается 
в открывающемся списке справа от указанного поля ввода. 


> Введите в поле ввода текста Table width (Ширина таблицы) значение ширины 
таблицы, например 500. 


> Выберите в открывающемся списке справа от поля ввода Table width (Ширина 
таблицы) значение pixels (Пикселы) для задания фиксированной ширины, или 
percent (Процент) — для задания относительной ширины. 


Стандартная рамка таблицы имеет объемный вид, поэтому толщина рамки будет 
немного отличаться от значения, указанного в поле ввода текста Border thickness 
(Толщина рамки). Если ничего не указывать в этом поле ввода текста или ввести 
значение 0, рамка будет невидимой. Толщина рамки измеряется в пикселах. 


> Введите в поле ввода текста Border thickness (Толщина рамки) значение тол- 
щины рамки, например 3. 


Значение отступа между границей ячейки и содержимого измеряется в пикселах 
и указывается в поле ввода текста Cell padding (Заполнение ячейки). Значение 
отступа между ячейками также измеряется в пикселах и указывается в поле вво- 
да текста Cell spacing (Расстояние ячейки). 


> Введите в поле ввода текста Cell padding (Заполнение ячейки) значение отсту- 
па между границей ячейки и содержимого, например 3. 
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> Введите в поле ввода текста Cell spacing (Расстояние ячейки) значение отсту- 
па между отдельными ячейками, например 3. 


В таблице могут быть расположены ячейки, текст в которых выделяется шриф- 
том с полужирным начертанием и выровнен по центру. Группа таких ячеек на- 
зывается заголовком таблицы. Чтобы выбрать вариант расположения заголовка 
таблицы, в центре диалога Table (Таблица) в группе Header (Заголовок) распо- 
ложены четыре кнопки: 


Y None (Отсутствует) — не создавать заголовок таблицы; 
и Left (Слева) — сделать заголовком таблицы первый столбец таблицы; 
и Тор (Сверху) — сделать заголовком таблицы первую строку таблицы; 


и Both (Оба) — сделать заголовком таблицы и первый столбец, и первую строку 
таблицы. 


Какие ячейки станут заголовком таблицы, наглядно отображено на самих кнопках. 


В нижней части диалога Table (Таблица) в группе Accessibility (Доступ- 
ность) расположены элементы управления настройками дополнительных па- 
раметров таблицы. 


> Введите в поле ввода текста Caption (Название таблицы), например Таблица 1. 


> Выберите в открывающемся списке Align caption (Выравнивание названия) 
значение, которое соответствует необходимому способу выравнивания назва- 
ния относительно таблицы, например top (Сверху). Название будет располо- 
жено над таблицей и выровнено по центру. 


Кроме выбранного значения, в открывающемся списке Align caption (Выравни- 
вание названия) доступны следующие варианты: 


и default (Го умолчанию) — выравнивание зависит от настроек обозревателя 
Интернета; 


и bottom (Снизу) — название располагается под таблицей и выравнивается по 
центру; 


И Тей (Слева) — название располагается над таблицей, выравнивается по левому 
краю таблицы; 


И right (Справа) — название располагается над таблицей, выравнивается по пра- 
вому краю таблицы. 


В поле ввода текста Summary (Сводка) у вас есть возможность ввести примеча- 
ние к таблице, то есть краткое пояснение или описание. Примечание не отобра- 
жается на экране, однако некоторые программы могут использовать данную ин- 
формацию для специальных функций. Указывать какое-либо значение в поле 
ввода текста Summary (Сводка) необязательно. 
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> Введите в поле ввода текста Summary (Сводка) примечание таблицы, напри- 
мер Моя первая таблица. 


Все параметры таблицы настроены. 


> Щелкните мышью на кнопке ОК. Диалог Table (Таблица) закроется, и в пози- 
ции, в которой расположен текстовый курсор, появится таблица в формате, со- 
гласно сделанным настройкам (Рис. 2.2). 
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Рис. 2.2. Новая таблица 


Каждая ячейка таблицы может содержать текст, рисунки, а также другие таблицы. 
Введем в одну из ячеек таблицы текст. 


> Щелкните мышью на ячейке, в которую требуется ввести текст. Внутри ячейки 
появится текстовый курсор. 


> Введите с помощью клавиатуры необходимый текст. Размер ячейки автомати- 
чески увеличивается или уменьшается в зависимости от объема содержимого. 


Программа Macromedia Dreamweaver существенно упрощает работу с таблицами. 


Форматируем таблицы 


Текст внутри ячеек таблицы форматируется точно также, как и обычный текст 
на web-ctpaHuue. С форматированием текста вы ознакомились в предыдущей 
главе, поэтому сейчас рассмотрим основные принципы форматирования таблиц. 
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Обратите внимание, что содержимое панели инструментов Properties (Свойст- 
ва) изменяется в зависимости от того, какой объект в данный момент выделен. 
Например, если выделена ячейка таблицы, целая строка или столбец, в нижней 
части панели инструментов Properties (Свойства) появляются элементы управ- 
ления для изменения свойств ячеек. А если выделена таблица полностью, то на 
панели инструментов Properties (Свойства) появляются элементы управления 
для изменения свойств таблицы в целом. 


Проще и удобнее работать с таблицами в режиме Expanded tables (Расширен- 
ные таблицы). В данном режиме таблицы отображаются крупнее и с более тол- 
стой рамкой. Этот режим позволит вам точнее указывать мышью на ячейках или 
границах таблицы. 


> Выберите команду меню View + Table Mode + Expanded tables mode (Вид + 
Режим таблицы + Режим расширенных таблиц). Таблица в окне документа уве- 
личится, и работать с ней станет удобнее. 


Чтобы переключиться в обычный режим, выполните следующее действие. 


> Щелкните мышью на ссылке ехй (Выход), расположенной под панелью инстру- 
ментов Document (Документ). Таблица в окне документа примет обычный вид. 


А теперь перейдем непосредственно к изменению свойств таблицы. 


Изменяем свойства таблицы 


С помощью панели инструментов Properties (Свойства) вы можете изменить те 
параметры созданной таблицы, которые вводили в диалоге Table (Таблица). 
Необходимые для изменения параметров таблицы элементы управления, на па- 
нели инструментов Properties (Свойства), появятся после выделения таблицы. 


> Щелкните мышью на любой ячейке таблицы. В ячейке появится текстовый 
курсор. 


> Выберите команду меню Modify + Table « Select Table (Модификация + Таб- 
лица + Выбрать таблицу). Таблица будет выделена, а на панели инструментов 


Properties (Свойства) появятся элементы управления для изменения свойств 
таблиц (Рис. 2.3). 


Rows | CellPad beat Align | Default м. Class | None 
Cols H — pixels (| CellSpace Г Border 


пк вм it Bg color i ИЕ Brdr color i? БИА 
IIe  pgimge( dO 


Рис. 2.3. Панель инструментов Properties (Свойства), если выделена таблица 


Попробуем изменить количество столбцов и строк. 
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> Введите в поле ввода текста Rows (Строки) на панели инструментов 
Properties (Свойства) новое количество строк, например 4. Количество строк в 
таблице будет изменено в зависимости от введенного значения. 


> Введите в поле ввода текста Cols (Столбцы) на панели инструментов 
Properties (Свойства) новое количество столбцов, например 3. Количество 
столбцов в таблице будет изменено в зависимости от введенного значения. 


Вы можете изменить ширину таблицы, сделать ее фиксированной или, наоборот, 
абсолютной. 


> Введите в поле ввода текста W (Ширина) на панели инструментов Properties 
(Свойства) значение ширины таблицы. Ширина таблицы изменится в соответ- 
ствии с вновь выбранными параметрами. 


> Введите в поле ввода текста Н (Высота) на панели инструментов Properties 
(Свойства) значение высоты таблицы. Высота таблицы изменится в соответст- 
вии с вновь выбранными параметрами. 


Выберите из открывающегося списка справа от поля ввода W (Ширина) значе- 
ние pixels (Пикселы), если таблица должна быть фиксированной, или % (Про- 
центы) — если абсолютной. 


Напомним, что значение ширины, заданное в пикселах, называется фиксирован- 
ным, Так как оно постоянно, независимо от ширины окна обозревателя Интер- 
нет. Значение ширины, заданное в процентах, называется относительным, так 
как изменяется в зависимости от ширины окна обозревателя Интернета. 


Таблица, как и текст, может быть выровнена на Web-cTpaHuue. Выровняем соз- 
данную нами таблицу по центру. 


> Выберите в открывающемся списке Align (Выравнивание) на панели инст- 
рументов Properties (Свойства) значение Center (Центр). Таблица будет вы- 
ровнена по центру. 


Кроме того, в открывающемся списке Align (Выравнивание) на панели инстру- 
ментов Properties (Свойства) вы можете выбрать одно из следующих значений: 


и Default (По умолчанию) — таблица выравнивается в зависимости от настроек 
обозревателя Интернета; 


и Left (Слева) — таблица выравнивается по левому краю; 
и Right (Справа) — таблица выравнивается по правому краю. 


Также с помощью элементов управления панели инструментов Properties (Свой- 
ства) вы можете изменить и оформление таблицы. Но в программе Macromedia 
Dreamweaver есть более удобный способ, который мы и рассмотрим далее. 
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Изменяем оформление таблицы 


Программа Macromedia Dreamweaver существенно упрощает работу по подго- 
товке меб-страниц, а также часто предлагает определенные готовые решения. 
Рассмотрим, чем редактор Macromedia Dreamweaver может помочь нам в 
оформлении таблицы. 


> Выделите таблицу, как описывалось ранее. 


> Выберите команду меню Commands + Format Table (Команды + Форматиро- 
вание таблицы). На экране появится диалог Format Table (Форматирование 
таблицы) (Рис. 2.4). 


Format Table 


Роме: се Blue 
DbIRows: Orange 


Row colors: First: Ге _ | Second: Г=| lightareen 
Alternate: |Every Two Rows У 


Top row: Align: Text style: 
Bg color: [.|[lightyellow Text color; № [9 | 


Left col: Align: Text style: 
Table: Border: 


LJ Apply all attributes to TD tags instead of TR tags 


Puc. 2.4. Диалог для выбора внешнего вида таблицы 


Стоит отметить, что если вы при создании таблицы в поле 
ввода текста Caption (Название таблицы) диалога Table (Табли- 
ца) (Рис. 2.1) указывали название таблицы, элементы управления 
диалога Format Table (Форматирование таблицы) могут не ото- 
бражаться и будет выведено сообщение The Format Table 
command cannot be applied to tables with captions (Команда 
(Форматирование таблицы) не применима к таблицам с назва- 
ниями. В этом случае потребуется создать новую таблицу или 
удалить название таблицы. 


В левом верхнем углу диалога Format Table (Форматирование таблицы) распо- 
ложен список, в котором вы можете выбрать один из вариантов оформления. 
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Просмотреть результат можно в окне предварительного просмотра, располо- 
женном правее. 


> Выберите вариант оформления таблицы в списке в верхнем левом углу диалога 
Format Table (Форматирование таблицы), просматривая результат. 


Кроме того, вы можете самостоятельно откорректировать параметры оформле- 
ния таблицы под свой вкус, используя элементы управления, находящиеся под 
списком и окном предварительного просмотра диалога Format Table (Формати- 
рование таблицы). 


> В группе Row colors (Цвета строки) у вас есть возможность выбрать цвета 
строк таблицы и вариант их чередования. 


> Щелкнув мышью на кнопке Г. справа от надписи First (Первый), выберите в 
открывшейся палитре первый цвет таблицы. 


> Щелкнув мышью на кнопке (el справа от надписи Second (Второй), выбери- 
те в открывшейся палитре второй цвет. 


В открывающемся списке Alternate (Альтернативный) вы можете выбрать один 
из пяти вариантов чередования цвета строк таблицы: 


VY При выборе значения <do not alternate> (Нет альтернативы) все строки таб- 
лицы будут окрашены лишь в один цвет, который выбран в палитре First 
(Первый); 

Y При выборе значения Every Other Row (Через строку) первый и второй цвета 
будут чередоваться через одну строку; 


Y При выборе значения Every Two Rows (Через две строки) чередование будет 
через две строки; 


Y При выборе значения Every Three Rows (Через три строки) чередование 
будет через три строки; 


VY При выборе значения Every Four Rows (Через четыре строки) чередование 
будет через четыре строки. 


Сделаем так, чтобы первый и второй цвет чередовались через каждые три строки. 


> Выберите в открывающемся списке Alternate (Альтернативный) значение 
Every Three Rows (Через три строки). Вид таблицы в правом верхнем углу 
диалога Format Table (Форматирование таблицы) изменится. 


В группе Тор гом (Верхняя строка) вы можете изменить вариант оформления 
шапки таблицы. 


> Способ выравнивания текста в ячейках шапки таблицы выбирается в откры- 
вающемся списке Align (Выравнивание), расположенном в группе Тор row 
(Верхняя строка). Доступны следующие варианты: 
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и Значение None (Ничего) располагает текст без выравнивания; 

Y Значение Left (Слева) установит выравнивание текста по левому краю; 

и’ Значение Center (Центр) установит выравнивание текста по центру; 

Y Значение Right (Справа) установит выравнивание текста по правому краю. 
Сделаем так, чтобы текст в ячейках шапки таблицы был выровнен по центру. 


> Выберите в открывающемся списке Align (Выравнивание), расположенном в 
группе Тор row (Верхняя строка), значение Center (Центр). 


Также вы можете выбрать вариант начертания шрифта текста в ячейках шапки 
таблицы. Для этого в открывающемся списке Text style (Стиль текста) опреде- 
лены четыре значения: 


и Regular (Обычный) — начертание шрифта обычное; 

и Bold (Жирный) — начертание шрифта полужирное; 

и Italic (Курсивный) — начертание шрифта курсивное; 

и Bold Italic ОКирный Курсивный) — начертание шрифта полужирное и курсивное. 


Изменим этот параметр так, чтобы текст в ячейках шапки таблицы был выведен 
шрифтом, имеющим полужирное начертание. 


> Выберите в открывающемся списке Text style (Стиль текста), расположенном 
в группе Тор row (Верхняя строка), значение Bold (Жирный). 


Вы можете изменить также цвет фона и цвет текста ячеек шапки таблицы. 


> Щелкните мышью на кнопке Г.] справа от надписи Bg color (Цвет фона) в 
появившейся палитре выберите понравившийся цвет фона ячеек. 


> Щелкните мышью на кнопке mer справа от надписи Text color (Цвет текста) в 
появившейся палитре выберите понравившийся цвет текста в ячейках шапки 
таблицы. 


Часто бывает, что функции шапки таблицы выполняет также и первый столбец 
таблицы. В программе Macromedia Dreamweaver есть возможность выбрать спо- 
соб выравнивания текста в ячейках первого столбца, а также и вариант начерта- 
ния шрифта текста ячеек первого столбца. Для этого в диалоге Format Table 
(Форматирование таблицы) существует группа элементов управления Left col 
(Левый столбец). 


Сделаем так, чтобы текст в ячейках первого столбца был выровнен по правому 
краю, а начертание шрифта стало курсивным. 


> Выберите в открывающемся списке Align (Выравнивание) группы Left col (Ле- 
вый столбец) значение Right (Справа). 
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> Выберите в открывающемся списке Text style (Стиль текста) группы Left col 
(Левый столбец) значение Найс (Курсивный). 


Толщину рамки можно выбрать в группе Table (Таблица) в нижней части диало- 
ra Format Table (Форматирование таблицы). 


> Введите в поле ввода текста Border (Рамка) толщину рамки, например 
значение 2. 


Теперь осталось применить все изменения к нашей таблице. 


> Щелкните мышью на кнопке ОК. Диалог Format Table (Форматирование таб- 
лицы) будет закрыт, а таблица приобретет новый внешний вид. 


Как вы уже поняли, изменить внешний вид всей таблицы в целом совсем просто. 
Но часто бывает необходимо изменить какие-либо свойства отдельных ячеек, 
например разделить одну ячейку на две или выбрать цвет фона. Поэтому далее 
мы научимся изменять свойства отдельных ячеек. 


Изменяем свойства отдельных ячеек 
Вы можете изменять свойства как целых строк или столбцов, так и отдельных 
ячеек. В зависимости от этого на панели инструментов Properties (Свойства) в 


левом нижнем углу изменяется изображение: 


]|— работаем с ячейкой; 


|| работаем со строкой; 


—!| — работаем со столбцом. 


Если необходимо изменить свойства какой-либо строки, сначала ее следует вы- 
делить мышью. 


> Установите указатель мыши на левую границу выделяемой строки таблицы. 
Указатель мыши примет вид ==. 


> Щелкните мышью. Указанная строка будет выделена черной рамкой. 


Если необходимо изменить свойства какого-либо столбца, его также следует 
выделить. 


> Установите указатель мыши на верхнюю границу необходимого столбца таб- 
лицы. Указатель мыши примет вид Ww. 
> Щелкните мышью. Указанный столбец будет выделен черной рамкой. 


Также вы можете изменить свойства одной ячейки. 
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Возможны ситуации, когда необходимо выделить не одну ячейку, a сразу He- 
сколько. В этом случае можно поступить следующим образом. 


> Установите указатель мыши в ячейку, с которой необходимо начать выделение. 
> Нажмите и удерживайте левую кнопку мыши. 


> Не отпуская левую кнопку мыши, переместите указатель к ячейке, завершаю- 
щей выделение. 


> Отпустите левую кнопку мыши. Выделенные ячейки обведены черным прямо- 
угольником. 


После того как необходимые ячейки, строки или столбцы выделены, панель ин- 
струментов Properties (Свойства) примет вид, как показано на Рис. 2.5. 


=r Cell 
aa 


Mm 3 


Рис. 2.5. Содержимое панели инструментов Properties (Свойства) 
для редактирования свойств ячеек 


Как видно из рисунка, верхняя часть панели инструментов Properties (Свойства) 
содержит элементы управления для форматирования текста, а нижняя часть — 
для форматирования ячеек. 


Если выделена всего одна ячейка, то появляется возможность разбить ее на не- 
СКОЛЬКО столбцов или строк. 


> Щелкните мышью на требуемой ячейке. В ячейке таблицы появится текстовый 
курсор. 


> Щелкните мышью на кнопке С| Split cell into rows or columns (Разделить 
ячейку на строки или столбцы), расположенной на панели инструментов 
Properties (Свойства). На экране появится диалог Split Cell (Разделить 
ячейку) (Рис. 2.6). 


Split Cell 


Split cell into: (©) Rows 


© Columns 


Number of rows: [2 


Puc. 2.6. Диалог Split Сей (Разделить ячейку) 
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> Установите переключатель Split cell into (Разделить ячейку на) в положение 
Rows (Строки) для разбиения на строки, или в положение Columns (Столбцы) 
для разбиения на столбцы. 


В зависимости от положения переключателя Split cell into (Разделить ячейку 
на), имя поля ввода со счетчиком изменится Ha Number of rows (Количество 
строк), если переключатель установлен в положение Rows (Строки), или на 
Number of columns (Количество столбцов), если переключатель находится в 
положении Columns (Столбцы). 


> Введите в поле со счетчиком Number of ... (Количество ...) количество строк 
или столбцов, на которые должна быть разделена ячейка. 


> Щелкните мышью на кнопке ОК. Диалог Split Сей (Разделить ячейку) закроет- 
ся, а ячейка будет разделена на указанное количество строк или столбцов. 


Также ячейки в таблице MO?KHO объединять. 


> Выделите ячейки, которые необходимо объединить. Можно также выделить 
строки или столбцы. 


> Щелкните мышью на кнопке Merges selected cells using spans (Соеди- 
нить выделенные ячейки), расположенной на панели инструментов Properties 
(Свойства). Ячейки будут объединены. 


Для каждой из ячеек вы можете выбрать вариант выравнивания содержимого по 
горизонтали или по вертикали. Чтобы выбрать способ выравнивания содержи- 
мого ячейки по горизонтали, в открывающемся списке Horz (Горизонталь) нуж- 
но выбрать одно из значений: 


и Left (Слева) для выравнивания по левому краю; 
и Center (По центру) для выравнивания по центру; 
и Right (Справа) для выравнивания по правому краю; 


и Default (По умолчанию) для выравнивания в зависимости от настроек обо- 
зревателя Интернета. 


Чтобы выбрать способ выравнивания содержимого ячейки по вертикали, в от- 
крывающемся списке Vert (Вертикаль) нужно выбрать одно из значений: 


и Тор (По верху) для выравнивания по верхнему краю; 
и Midle (Середина) для выравнивания по середине; 
Y Bottom (Низ) для выравнивания по нижнему краю; 


и Default (По умолчанию) для выравнивания в зависимости от настроек обо- 
зревателя Интернета. 


Для оформления можно изменить цвет фона и цвет границ выбранных ячеек. 
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> Чтобы выбрать цвет границы, щелкните мышью на кнопке rh, справа OT над- 
писи Brdr (Граница), и в появившейся палитре выберите необходимый цвет. 


> Чтобы выбрать цвет фона ячейки, щелкните мышью на кнопке Г. справа от 
надписи Bg (Цвет фона), и в появившейся палитре выберите цвет. 


Создав таблицу, в дальнейшем вы можете изменять параметры, когда возникнет 
такая необходимость. Программа Macromedia Dreamweaver существенно упро- 
щает не только процесс создания таблиц, но и их редактирования. 


Сегодня таблицы на меб-страницах используются не только для компактного и 
наглядного размещения каких-либо данных, но также и для оформления. Одно 
из преимуществ таблиц — точное позиционирование элементов оформления на 
меб-странице. Далее мы рассмотрим способ использования таблиц для создания 
профессионально оформленных \меБ-страниц. 


Создаем дизайн страницы на основе таблицы 


Дизайн многих современных меб-страниц построен с помощью таблиц. С их 
помощью становится просто создавать страницы самого разного вида. Чтобы 
лучше понять суть дизайна на основе таблиц, мы создадим каркас, который в 
дальнейшем можно будет использовать на любых \меБ-страницах. 


> Создайте новую ме-страницу. 


Наиболее часто меб-страницу разделяют на следующие блоки: заголовок, блок 
гиперссылок, блок основного содержимого страницы, блок новостей и строку с 
авторскими правами. Для указанных блоков далее мы и создадим каркас. 


Рассмотрим процесс создания таблицы, которая будет использоваться в качестве 
каркаса страницы. 


> Создайте новую таблицу 3 строки на 3 столбца с шириной 100%. 


Теперь объединим ячейки для блока заголовка и блока сведений об авторских 
правах. 


> Объедините ячейки в первой строке. Здесь будет размещен заголовок страницы. 


> Объедините ячейки в третьей строке. Здесь будет размещена информация об 
авторском праве. 


Чтобы ширина блоков набора гиперссылок и новостей не зависела от ширины 
окна обозревателя Интернета, мы сделаем ее фиксированной. 


> Щелкните мышью на первой ячейке второй строки. В ячейке появится тексто- 
вый курсор. 
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> Введите в поле ввода текста W (Ширина), которое расположено на панели 
инструментов Properties (Свойства), значение ширины, например 180. 


> Щелкните мышью на третьей ячейке второй строки. В ячейке появится тексто- 
вый курсор. 


> Введите в поле ввода текста W (Ширина), которое расположено на панели ин- 
струментов Properties (Свойства), значение ширины, например 180. 


Когда мы указываем какое-либо значение в поле ввода текста W (Ширина), ши- 
рина выделенной ячейки становится фиксированной. Таким образом, у первой и 
третьей ячеек второй строки таблицы ширина зафиксирована. А ширина второй 
ячейки, в которой будет расположено основное содержимое страницы, будет 
устанавливаться обозревателем Интернета в зависимости от ширины окна так, 
чтобы таблица заполняла все окно. 


Кроме того, для всей второй строки мы выберем вертикальное выравнивание по 
верхнему краю. 


> Установите указатель мыши на левую границу второй строки таблицы. Указа- 
тель мыши примет вид =>. 


> Щелкните мышью. Указанная строка будет выделена черной рамкой. 


> В открывающемся списке Vert (Вертикаль), который расположен на панели 
инструментов Properties (Свойства), выберите строку Тор (Сверху). Будет 
выбран вертикальный способ выравнивания содержимого ячеек по верхне- 
му краю. 


Чтобы стало понятно, где какие блоки будут находиться, мы введем в ячейки 
названия. 


> Введите в первую строку текст Заголовок сайта. 

> Введите в первую ячейку второй строки текст Набор гиперссылок. 

> Введите во вторую ячейку второй строки текст Основное содержимое. 
> Введите в третью ячейку второй строки текст Панель новостей. 

> Введите в третью строку текст Сведения об авторских правах. 


Таким образом, у нас получился каркас меб-страницы, примерно как показа- 
но на Рис. 2.7. 


Создавая меб-страницы на базе табличного дизайна, стоит иметь в виду, что стан- 
дартная объемная рамка таблицы будет смотреться не очень хорошо. Вы можете 
вообще отказаться от рамки, а можете сделать рамку таблицы необъемной. 


Чтобы создать необъемную рамку таблицы, выполните следующие действия. 


> Выделите таблицу, как описывалось ранее. 
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Сведения об авторских правах 


НЫ ыы 


Рис. 2.7. Разбиваем web-cmpanuyy на блоки 


> В поле ввода текста Border (Граница) на панели инструментов Properties 
(Свойства) введите значение 0. 


> Щелкните мышью на кнопке Г. расположенной в группе элементов Bg color 
(Цвет фона) на панели инструментов Properties (Свойства) и в появившейся 
палитре выберите понравившийся цвет, например синий. Цвет фона таблицы 
изменится. 


> Выделите все ячейки таблицы. 


Обратите внимание, что нужно выделить не таблицу, а все ячейки. 


> Щелкните мышью на кнопке Г. расположенной в группе элементов Bg (Цвет 
фона) на панели инструментов Properties (Свойства) и в появившейся палитре 
выберите цвет, например белый. Ячейки таблицы будут окрашены в белый цвет. 


Таким образом, мы создали таблицу с белым фоном и необъемной синей грани- 
цей. И теперь мы изменим ширину указанной границы. 


> Выделите таблицу. 


> Введите в поле CellSpace (Расстояние ячейки) на панели инструментов 
Properties (Свойства) значение толщины, например 8. Толщина границы 
изменится. 
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Ячейки таблиц могут содержать другие таблицы, графические изображения и 
другие объекты. Достоинство табличного дизайна в том, что все элементы нахо- 
дятся в четко определенных позициях, независимо от размеров окна обозревате- 
ля Интернета, например, если колонка новостей должна быть справа, то она ни 
при каких обстоятельствах не окажется снизу при уменьшении ширины окна 
Обозревателя Интернета. 


Основное содержимое меб-страницы можно ввести во вторую ячейку второй 
строки точно также, как если бы вы работали на пустой странице. То есть, вы 
можете создавать в ячейке таблицы, списки, гиперссылки, вставлять рисунки и 
другие объекты. 


Сохраним созданную \М/еб-страницу, так как каркас меб-страницы может нам 
еще понадобиться. 


> Сохраните меб-страницу, например под именем Carcass.html. 


В текущем разделе мы рассмотрели лишь основы применения таблиц для 
оформления ме-страниц. А ведь, используя таблицы, вы, например, без труда 
сможете добавить на мМеБ-страницу не только несколько колонок текста, но и 
сноски или примечания. 


На табличном дизайне применение таблиц не заканчивается, поэтому далее мы 
рассмотрим еще несколько вариантов использования таблиц при оформлении 
миеб-страниц. 


Возможности табличного дизайна 


Таблицы Ha меб-страницах представляют собой мощный инструмент, возмож- 
ности которого ограничиваются лишь фантазией автора. Например, таблицы ис- 
пользуют для создания составных изображений, то есть состоящих из несколь- 
ких фрагментов, для точного позиционирования текста и других элементов, а 
также для создания красивых декоративных рамок. 


> Создайте новую \Меб-страницу. 


Начнем рассмотрение способов использования таблиц с самого простого вари- 
анта — создания текста в рамке. | 


> Создайте новую таблицу с параметрами 1 строка на 1 столбец, шириной 200 
пикселов. 


> Введите в ячейку какой-нибудь текст, например Текст в рамке. 
Теперь выберем цвет рамки и толщину. 


> Выделите таблицу, как описывалось ранее. 
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> Введите в поле ввода текста Border (Граница), расположенное Ha панели инст- 
рументов Properties (Свойства), новое значение толщины, например 5. Тол- 
щина границы изменится. 


> Щелкните мышью на кнопке Г.) расположенной в группе элементов Brdr 
color (Цвет границы) на панели инструментов Properties (Свойства). 


> В появившейся палитре выберите понравившийся цвет, например синий. Цвет 
границы таблицы изменится. 


Получится ячеика в рамке, как показано на Untitled-1.htmi* 


РИС. 2.8. | | 4 spit 


Рассмотрим пример использования таблиц для CO3- 
дания текста с отступом. 


> Создайте новую таблицу с параметрами 1 строка 
на 2 столбца, шириной 100%, без рамки. 


> Введите во вторую ячейку несколько строк тек- Рис. 2.6. Текст в рамке 


ста, например описание меб-страницы. 
Теперь изменим значение ширины отступа. 


> Щелкните мышью на первой ячейке. В указанной ячейке появится текстовый 
курсор. 


> Укажите в поле ввода текста W (Ширина), которое расположено на панели инст- 
рументов Properties (Свойства), необходимую ширину отступа, например 200. 


Таким образом, мы получили текст с отступом, как показано на Рис. 2.9. 


Untitled-1.html 


"Данная \УуеБб-страница необходима 
;мне для рассмотрения вариантов 


100% ч|503х 145% 1K/ 1 sec! 


Рис. 2.9. Текст с omcmynom 


Далее добавим с левой стороны текста вертикальную линию толщиной 2 пиксела. 


> Щелкните мышью на первой ячейке. В данной ячейке появится текстовый 
курсор. 
> Разделите первую ячейку на два столбца, как описывалось ранее. 


Таблица теперь содержит 1 строку и 3 столбца. 
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Роль отступа у нас выполняет первый столбец. После того как мы разделили 
данный столбец на два, ширина столбца также уменьшилась вдвое. Поэтому не- 
обходимо восстановить ширину отступа. 


> Щелкните мышью на первой ячейке. В данной ячейке появится текстовый 
курсор. 

> Введите в поле ввода текста W (Ширина) на панели инструментов Properties 
(Свойства) значение ширины отступа, например 200. Ширина ячейки изменится. 

Второй столбец будет исполнять роль вертикальной линии. 


> Щелкните мышью на второй ячейке. В данной ячейке появится текстовый 
курсор. 


> Введите в поле ввода текста W (Ширина) на панели инструментов Properties 
(Свойства) значение ширины, например 2. Ширина ячейки изменится. 


> Щелкните мышью на кнопке i=! расположенной в группе элементов Bg (Цвет 
фона) на панели инструментов Properties (Свойства), и в появившейся палитре 
выберите цвет, например красный. Столбцы буду разделены вертикальной ли- 
нией красного цвета (Рис. 2.10). 


Untitled-1.html* 


. 


TE A 


| Данная У\еб-страница необходима : 
мне для рассмотрения вариантов : 


Пс [100% 41503 x 1454) 1K} 1 sec! 


Рис. 2.10. Между отступом и текстом появилась вертикальная линия 


Существует множество вариантов использования табличного дизайна. Ведь язык 
разметки HTML имеет много ограничений. А таблицы нередко помогают обхо- 
дить эти ограничения. В данном разделе мы рассмотрели лишь основные вари- 
анты использования таблиц. Но, несмотря на все достоинства, таблицы имеют и 
недостатки. Далее мы рассмотрим проблемы, которые могут возникнуть в про- 
цессе создания таблиц. 


Решаем проблемы с таблицами 


Главной проблемой таблиц, которую от нас скрывают визуальные инструмен- 
ты программы Macromedia Dreamweaver, является запутанность и громозд- 
кость кода HTML. 
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Другой, не менее важной проблемой, может стать медленная обработка таблиц 
обозревателем Интернета. Например, программа Internet Explorer не отображает 
таблицу до завершения ее загрузки из Интернета на компьютер пользователя. 
Некоторые пользователи используют медленное соединение с Интернетом по- 
средством модема, поэтому в случае использования объемной таблицы ждать им 
придется загрузки вашего сайта очень и очень долго. 


Поэтому не следует создавать на мМеб-странице множество таблиц или очень 
громоздкие и объемные таблицы, а лучше использовать их в меру необходимо- 
сти. Кроме того, старайтесь делать значения ширины или высоты таблиц и их 
ячеек фиксированными, чтобы избавить обозреватель Интернета от большого 
объема вычислений, связанных с подгонкой ширины ячеек под содержимое. 


Используем шаблоны 


Блуждая в Интернете, вы могли заметить, что \меб-страницы одного сайта выпол- 
нены в едином стиле. Таким образом, добавляя новую \Меб-страницу, часто при- 
ходится создавать одни и те же повторяющиеся элементы, например, набор гипер- 
ссылок или заголовков с названием сайта и логотипом. Конечно, если необходимо 
добавить всего лишь одну страницу, то ничего затруднительного в этом нет. Но 
если необходимо добавить несколько Web-CTpaHHL, то большая часть времени бу- 
дет затрачена на создание одинаковых для всех меб-страниц элементов. | 


Как уже не раз отмечалось, программа Macromedia Dreamweaver содержит инст- 
рументы на все случаи жизни. И, конечно же, для создания Web-cTpaHHL с по- 
вторяющимися элементами оформления в редакторе есть подходящее средство, 
называемое шаблонами. При использовании шаблонов вы создаете web- 
страницу с одинаковыми для всех элементами оформления, а далее используете 
ее в качестве заготовки для новых страниц, добавляя необходимое содержимое. 


Созлаем шаблоны 


Шаблон в программе Macromedia Dreamweaver представляет собой практически 
такой же документ, как и меб-страница. Поэтому приемы создания шаблона в 
основном не отличаются от работы с меб-страницей. 


> Выберите команду меню File + New (Файл + Создать). На экране появится диа- 
лог New Document (Новый документ). 


> В списке Category (Категория) выберите значение Basic раде (Простая 
страница). 


> В списке Basic раде (Простая страница) выберите значение HTML template 
(НТМГ-шаблон). 


> В открывающемся списке Document Туре (DTD) (Тип документа (DTD)) выбе- 
pute значение HTML 4.01 Transitional (Язык разметки гипертекста). 
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> Щелкните мышью на кнопке Create (Создать). Диалог New Document (Новый 
документ) закроется, а в окне программы Macromedia Dreamweaver появится 
новая \М/еб-страница. 


Теперь необходимо добавить в шаблон неизменяемое содержимое, то есть те 
элементы, которые будут одинаковыми для всех \еБ-страниц, использующих 
данный шаблон. 


> Создайте на меб-странице новый элемент, например таблицу. 


После того как вы добавили неизменяемое содержимое, необходимо создать на 
странице изменяемые области. Дело в том, что когда вы будете создавать Web- 
страницы на основе шаблона, программа Macromedia Dreamweaver не позволит 
редактировать неизменяемое содержимое, и изменения можно будет вносить 
только в так называемые изменяемые области. В дальнейшей работе вы ощутите 
все преимущества шаблонов: при изменении вида шаблона автоматически изме- 
няются и Меб-страницы, использующие данный шаблон. 


Создадим в подготавливаемом шаблоне изменяемую область. 


> Установите текстовый курсор в позиции меБ-страницы, в которую будет до- 
бавлена изменяемая область. 


> Выберите команду меню Insert + Template Objects « Editable Region (Встав- 
ка + Объекты шаблона + Изменяемая область). На экране появится диалог New 
Editable Region (Новая изменяемая область) (Рис. 2.11). 


New Editable Region Ра 


Мате: | EditRegion 
This region will be editable in documents 


based on this template. 


Рис. 2.11. Диалог для ввода имени изменяемой области 


> Введите в поле ввода текста Name (Имя) диалога New Editable Region (Новая 
изменяемая область) уникальное имя изменяемой области или оставьте значе- 
ние, предложенное по умолчанию. 


> Щелкните мышью на кнопке ОК. Диалог New Editable Region (Новая изме- 
няемая область) исчезнет, а на ммеб-странице в окне документа, в позиции тек- 
стового курсора, появится изменяемая область (Рис. 2.12). 


> Обратите внимание, если поместить текстовый курсор внутрь изменяемой об- 
ласти, на панели инструментов Properties (Свойства) появляются элементы 
управления для форматирования текста. Таким образом, вы можете заранее 
выбрать шрифт, цвет и размер текста в изменяемой области. 


3 — 6268 
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Puc. 2.12. Изменяемая область 


Далее следует сохранить шаблон. 


> Выберите команду меню File + Save (Файл + Сохранить). На экране появится 
диалог Save As Template es как и PH. 2.10). 


Save As Template 


Existing templates: (no templates) 


Рис. 2.13. Диалог сохранения шаблона 


> В открывающемся списке Site (Сайт) диалога Save As Template (Сохранить 
как шаблон) выберите имя мер-сайта, для которого вы создаете шаблон. 


> Введите в поле ввода текста Зауе а$ (Сохранить как) любое удобное для вас 
имя шаблона, например tempi. 
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> Щелкните мышью на кнопке Save (Сохранить). Диалог Save As Template (Co- 
хранить как шаблон) закроется, а шаблон будет сохранен с указанными пара- 
метрами. 


Сохранив шаблон, вы можете использовать его для создания новых \еБ-страниц. 
Далее мы рассмотрим процесс создания \меБ-страниц на основе шаблонов. 


Создаем \У\еБ-страницы на основе шаблонов 


Использование шаблонов ускоряет и оптимизирует работу при создании несколь- 
ких страниц одного сайта. Создать \еб-страницу на основе шаблона очень просто. 


> Выберите команду меню File + New (Файл + Создать). На экране появится диа- 
лог New Document (Новый документ): 


> Перейдите на вкладку Templates (Шаблоны) диалога New Document (Новый 
документ). Заголовок и содержимое диалога New Document (Новый документ) 
изменятся (Рис. 2.14). 


New from Template 


Templates for: Site "бце]": Preview: 
Site "Site!" _ 


Description: 
<No description > 


Document Туре (DTD): 
XHTML 1.0 Transitional 


Update page when template changes | 


ны ane nena etm RRR RRA Am, мии ame 


Рис. 2.14. Диалог New from Tepmlate (Новый из шаблона) 


> В списке Templates for (Шаблоны для) выберите меб-сайт, над которым вы 
работаете, в нашем случае это Site "Site1" (Сайт "Зие1"). 


> В списке Site "Site1" (Сайт "Sitel") выберите необходимый шаблон, в нашем 
случае, templ. 
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> Щелкните мышью Ha кнопке Create (Создать). Диалог New from Template 
(Новый из шаблона) будет закрыт, и в окне программы Macromedia Dream- 
weaver появится новая \ммеб-страница на основе выбранного шаблона. 


Теперь вы можете самостоятельно добавить на меб-страницу содержимое. Об- 
ратите внимание, что изменять можно только данные в изменяемых областях. 


Редактирование шаблонов 


Вы можете использовать сохраненные шаблоны в качестве заготовок для новых 
шаблонов, а также вносить изменения в заготовки. Первым делом откроем файл 
с шаблоном. 


> Выберите команду меню File + Open (Файл + Открыть). На экране появится 
диалог Ореп (Открыть). 


> Выберите файл шаблона, в который требуется внести изменения, и нажмите 
кнопку Ореп (Открыть). Диалог Ореп (Открыть) будет закрыт, и в окне про- 
граммы Macromedia Dreamweaver появится окно с загруженным шаблоном. 


Редактирование шаблонов не отличается от приемов редактирования обычных 
миеб-страниц. После того как вы внесете необходимые изменения в шаблон, со- 
храните файл. 


> Выберите команду меню File + Save (Файл + Сохранить). Файл шаблона будет 
обновлен. 


Стоит отметить, что если вы создавали новые меб-страницы, основанные Ha pe- 
дактируемом шаблоне, то на экране появится диалог Update Template Files 
(Обновить файлы шаблона) (Рис. 2.15). 


Update Template Files 


Update all files based on this template? i 
cares 


‚ Untitled-8.htrnl 


Рис. 2.15. Диалог обновления web-cmpanuy на основе шаблона 


При изменении шаблона программа Macromedia Dreamweaver может автомати- 
чески внести изменения в каждую \меб-страницу, созданную на основе изменяе- 
мого шаблона. Таким образом, пользователь будет избавлен от рутинной работы 
по внесению изменений в каждую \Меб-страницу. Поэтому с помощью шаблонов 
можно легко изменять дизайн целого \Меб-сайта посредством корректировки 
шаблона, на основе которого построены меБ-страницы сайта. 


Вводим Ha web-ctpaHnuy таблицы 69 


> Выберите в списке Update all files based on this template? (Обновить все фай- 
лы, основанные Ha данном шаблоне?) диалога Update Template Files (Обно- 
вить файлы шаблона) файлы меб-страниц, которые необходимо обновить. 


> Щелкните мышью на кнопке Update (Обновить) для обновления. Диалог 
Update Template Files (Обновить файлы шаблона) будет закрыт, и на экране 
появится диалог Update Pages (Обновить страницы) (Рис. 2.16). 


@ Update Pages 


Lookin: |Files That Use... ¥ 
Update: [_] Library items 
ии 


C]show log one 


Status: 


Puc. 2.16. Диалог обновления страниц 


Данный диалог сообщает об успешном завершении операции по обновлению 
файлов. 


> Щелкните мышью на кнопке Close (Закрыть) для закрытия диалога Update 
Раде$ (Обновить страницы). 


Использование шаблонов позволяет быстро создавать и редактировать web- 
страницы сайта. Таким образом, вы легко сможете обновлять дизайн своих Web- 
страниц, не давая информации устареть, а оформлению надоесть. 


Заключение 


В данной главе мы рассмотрели способы создания и использования таблиц. 
Освоили принципы создания Меб-страниц на основе табличного дизайна, а так- 
же на примере увидели нестандартное использование таблиц для создания кра- 
сивой декоративной рамки для текста. Присмотрелись мы и к недостаткам таб- 
лиц, чрезмерное применение которых может привести к слишком медленной 
загрузке страницы. Таким образом, рекомендуется использовать таблицы в меру. 


Кроме того, в этой главе мы рассмотрели приемы работы с шаблонами, которые 
существенно упрощают создание и обновление меБ-сайтов, превращая процеду- 
ру изменения дизайна сайта, его усовершенствование и расширение в простое и 
легкое занятие. 


В следующей главе мы освоим приемы добавления на ме-страницы мульти- 
медийных объектов — рисунков, звуков и анимации. Мы разберемся, что та- 
кое баннеры и как с ними работать. А также рассмотрим принципы создания 
графических меню. 


ГЛАВА 3. 
Украшаем м/еб-страницу рисунками 
и делаем ее звучашей 


Иллюстрации и звук делают меб-страницы более красивыми и привлекают вни- 
мание посетителя, а также облегчают восприятие. Зачастую бывает просто необ- 
ходимо поместить на меб-страницу небольшой рисунок, содержимое которого 
пояснит или даже заменит большой объем текста. Кроме того, все чаще и чаще 
на меб-страницах используется На$П-анимация, с помощью которой создают 
кнопки, меню, баннеры и другие интерактивные объекты. 


В данной главе мы освоим приемы вставки на меб-страницу рисунков и облас- 
тей для размещения баннеров. Разберем принцип создания из рисунков гипер- 
ссылок и рассмотрим возможности программа Macromedia Dreamweaver по ра- 
боте с Назй-анимацией, а также добавим Ha меб-страницу звуковые эффекты. 


Вставляем рисунки 


Как уже было сказано ранее, меб-страницы представляют собой обычные тек- 
стовые файлы, содержащие управляющие элементы языка разметки HTML. А это 
говорит о том, что рисунки должны храниться в отдельных графических файлах. 


Существует большое количество различных форматов графических файлов, од- 
нако в Интернете чаще используют лишь три из них: GIF, JPEG и РМС. Кроме 
того, форматы GIF и JPEG поддерживаются всеми программами — обозревате- 
лями Интернета, а вот формат РМС, который появился относительно недавно, 
поддерживается лишь новыми версиями обозревателей. 


Рассмотрим, как вставить на Меб-страницу рисунок. 
> Создайте новую Web-cTpaHHly, как описывалось ранее. 


> Выберите команду меню Insert + Image (Вставка + Изображение). На 
экране появится диалог Select Image Source (Выбор источника изображе- 
ния) (Рис. 3.1). 


> В открывающемся списке Папка (Folder) выберите диск и папку, в которой 
находится требуемый графический файл. 
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Select Image Source 


Select file name from: ©) File system Chas and Servers... 


© Data sources 


Ejimage.jpg 


Тип файлов: | Image Files (*.gif:*.ipg:”.jpeg:”. png) 


Relative to: ex html 


Change default Link Relative To in the site definition. 


Preview images 


Puc. 3.1. Диалог Select Image Source (Выбор источника изображения) 


> Выберите графический файл и щелкните мышью на кнопке ОК. Диалог 
Select Image Source (Выбор источника изображения) закроется, и появит- 
ся диалог Image Tag Accessibility Attributes (Атрибуты доступности тэга 


рисунка) (Рис. 3.2). 


В случае, если вы выбрали файл, находящийся в папке, отличной 

{ ) от директории с файлами проекта, на экране появится диалог с 
и запросом о копировании файлов. Нажмите кнопку Да (ОК), чтобы 
= сохранить выбранный файл в папку проекта. 


Image Tag Accessibility Attributes 


Alternate text: 
Long description: | http:// [р 


IF you dont want to enter this information when inserting 
objects, change the Accessibility preferences. 


Рис. 3.2. Диалог Image Tag Accessibility Attributes 
(Атрибуты доступности тэга рисунка) 


AS nen 
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С помощью элементов управления, расположенных в диалоге Image Tag 
Accessibility Attributes (Атрибуты доступности тэга рисунка), рисунку можно 
сопоставить текстовое пояснение. Дело в том, что многие пользователи Интер- 
нета, в целях снижения трафика, предпочитают просматривать меб-страницы 
без рисунков. У таких пользователей в местах, где должны быть рисунки, будут 
отображаться тексты замены, которые и пояснят назначение каждого рисунка. 
Конечно, текст замены будет присутствовать в том случае, если создатель Web- 
страницы об этом позаботится. 


У вас есть возможность ввести краткое пояснение в поле ввода Alternate text 
(Альтернативный текст) или же детально описать в текстовом файле назначение 
рисунка, и в поле ввода Long description (Длинное описание) ввести ссылку к 
текстовому файлу с описанием. 


Если вы хотите кратко пояснить назначение рисунка, тогда вам следует выпол- 
нить следующее действие. 


> Введите в поле ввода Alternate text (Альтернативный текст) текст, KOTO- 
рый будет отображаться вместо рисунка. 


Если вам необходимо ввести подробный текст замены, выполните следующие 
действия. 


> Создайте текстовый файл с текстом, замещающим рисунок, в корневой 
папке web-caHtTa. 


> Щелкните мышью на кнопке (Г, расположенной справа OT поля ввода 
Long description (Длинное описание). Появится уже знакомый вам диалог 
Select File (Выбор файла), служащий для выбора файла. 


> Выберите в диалоге Select File (Выбор файла) текстовый файл с текстом 
замены и нажмите кнопку ОК. Диалог Select File (Выбор файла) будет 
закрыт. 


Рисунок будет вставлен на меб-страницу после того, как вы щелкнете мышью на 
кнопке ОК диалога Image Tag Accessibility Attributes (Атрибуты доступности 
этикетки рисунка). 


> Щелкните мышью на кнопке ОК диалога Image Tag Accessibility 
Attributes (Атрибуты доступности этикетки рисунка). Диалог Image Tag 
Accessibility Attributes (Атрибуты доступности этикетки рисунка) закро- 
ется, и в позиции, в которой расположен текстовый курсор, появится ри- 
сунок (Рис. 3.3). 
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@ Macromedia Dreamweaver 8 - [C:\Documents and Settings \Alexey\Mon документы\$ Не] \webpict. html (XHTML)*] 
File Edit Yiew Insert Modify Text Commands Site Window Help 


Common * Aaea@-¢-SSQl\B-S 


t | С Desion | Tle: [Untitled боле" 


| Gi CS Site - 5%е! (C:\Documents and $ 
9: webpict html 


3 ‘jenna в on 


г 


Page Properties... List Item... 


Рис. 3.3. Добавленный рисунок 


Мы рассмотрели приемы вставки на меб-страницу рисунков, и теперь вы може- 
те украшать свой сайт графикой. 


При вставке графических файлов стоит учитывать, что в отличие от текста, ри- 
сунки имеют гораздо больший размер, поэтому не рекомендуется размещать 
очень много рисунков или изображения большого размера. В противном случае 
страницы вашего сайта будут загружаться очень медленно. 


Изменяем свойства рисунка 


Чтобы рисунки вписывались в общий дизайн \меб-страницы, иногда требуется 
изменить некоторые свойства изображений, например размер или способ вырав- 
нивания. Далее мы рассмотрим приемы изменения свойств рисунков. 


Как и свойства любых других элементов оформления меб-страницы, свойства 
рисунков изменяются с помощью элементов управления на панели инструмен- 
тов Properties (Свойства). А чтобы на панели инструментов Properties (Свойст- 
ва) появились элементы управления для изменения свойств рисунков, сначала 
рисунок следует выделить. 
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> Щелкните мышью на рисунке, свойства которого требуется изменить. Ри- 
сунок будет выделен рамкой, а содержимое панели инструментов 
Properties (Свойства) изменится, и на ней отобразятся элементы управле- 
ния, служащие для изменения свойств рисунка (Рис. 3.4). 


Я = Image, 40K W Космонафт м Class 2 


[ ] нбз ] tink [Ot O DWE 
Map is ¥ Space i. Target Border [| = 
HOU ноже [ок Ld ln 


Рис. 3.4. Панель инструментов Properties (Свойства) с элементами управления, 
служащими для изменения свойств рисунка 


Чаще всего требуется изменить размер рисунка. Для изменения размеров на па- 
нели инструментов Properties (Свойства) расположены два поля ввода: W (Ши- 
рина) и Н (Высота), изменяя значения в которых, можно определить размер ри- 
сунка. Размер изображений измеряется в пикселах или процентах. 


Для примера сделаем ширину рисунка 400 пикселов, а высоту 110%. 


> Введите в поле ввода текста W (Ширина), расположенном на панели инст- 
рументов Properties (Свойства), новое значение ширины, например 400. 
Ширина выделенного рисунка изменится. 


> Введите в поле ввода текста Н (Высота), расположенном на панели 
инструментов Properties (Свойства), новое значение высоты, например 
110%. Высота выделенного рисунка изменится. 


Обратите внимание, что при изменении размера рисунка справа от полей ввода 
текста W (Ширина) и Н (Высота) появляется кнопка [С\, нажав на которую, вы 
вернете значения размеров рисунка по умолчанию. 


> Щелкните мышью на кнопке [©1, расположенной справа от полей ввода 
текста W (Ширина) и Н (Высота) на панели инструментов Properties 
(Свойства). Ширина и высота рисунка примут исходные значения. 


Как и текст, рисунок может быть выровнен по правому или левому краю, а так- 
же по центру. Способ выравнивания выбирается нажатием одной из кнопок: 


Fl или Ell расположенных на панели инструментов Properties (Свойст- 


ва), которые означают выравнивание рисунка по левому краю, по центру и по 
правому краю мер-страницы. 


Сделаем так, чтобы рисунок был выровнен по правому краю. 


> Щелкните мышью на кнопке |= Рисунок будет выровнен по правому 
краю У!еБ-страницы. 
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На данном этапе мы рассмотрели лишь наиболее важные свойства рисунка. 
В дальнейшем мы изучим и остальные свойства. А сейчас разместим на web- 
странице область для баннера. 


Полготавливаем и вставляем баннер 


Баннер — это очень популярный способ рекламы в Интернете. Баннеры пред- 
ставляют собой привлекающие внимание рисунки, зачастую анимированные, 
щелкнув мышью на которых, вы переходите на другие ммеб-страницы или web- 
сайты. Стоит отметить, что в Интернете существуют баннерные сети — специ- 
альные меб-порталы, через которые можно обмениваться баннерами. 


Размещение баннеров может существенно способствовать увеличению посе- 
щаемости вашего web-caiita. Кроме того, при публикации web-calita Ha бесплат- 
ных web-cepBepax, часто возникает необходимость разместить баннеры web- 
сервера в качестве оплаты услуг. Мы рассмотрим, как предусмотреть место на 
своих меб-страницах под баннеры. 


Чаще всего баннеры имеют стандартные размеры, представленные в Таблице 3.1. 


Полный баннер (Full banner) 468х60 


392x72 


Кнопка №2 (Button №2) 


Табл. 3.1. Виды баннеров 


Полный баннер с вертикальной навигационной 
панелью (Full banner with navigation bar) 


В случае, если у вас возникнет необходимость разместить на своей web- 
странице баннер, вам уже будет известен адрес рисунка баннера в Интернете, 
адрес меб-сайта, на который должен ссылаться этот баннер и размер. Сведения 
могут быть следующими: 
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и’ Адрес баннера: http://www.banners.ru/banners/System1.gif; 

и’ Адрес меб-сайта: http://www.banners.ru; 

и Размер баннера: 468х60. 

Для начала вам необходимо создать на своей меб-странице область для баннера. 


> Откройте или создайте меб-страницу, на которой вы хотите разместить 
баннер. 


> Щелкните мышью в любой области окна документа. В окне документа 
появится текстовый курсор. 


> Выберите команду меню Insert « Image Objects + Image Placeholder 
(Вставка + Объекты изображения + Место для изображения). На экране 
появится диалог Image Placeholder (Место изображения) (Рис. 3.5). 


пасе Placeholder 
Width: Height: 


color: Fd 


Рис. 3.5. Диалог Image Placeholder (Место изображения) 


> Введите в поле ввода Мате (Имя), расположенном на диалоге Image 
Placeholder (Место изображения), любое название для области изображе- 
ния, например значение Баппе!1. 


> Введите в поле ввода Width (Ширина), расположенном в диалоге Image 
Placeholder (Место изображения), ширину будущего баннера, например, 
значение 468. 


> Введите в поле ввода Height (Высота), расположенном в диалоге Image 
Placeholder (Место изображения) высоту будущего баннера, например, 
значение 60. 


> Введите в поле ввода Alternate text (Альтернативный текст) текст замены, 
который будет выведен вместо баннера в случае, если у посетителя вашего 
сайта будет отключен вывод изображений. 


> Щелкните мышью на кнопке ОК, которая расположена на диалоге Image 
Placeholder (Место изображения). В окне документа, в позиции текстово- 
го курсора, появится прямоугольная область для баннера (Рис. 3.6). 
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2 Macromedia Dreamweaver 8 - [C:\Documents and $еНтез\Аехеу\Мои документы\$ Не] \webpict. html (XHTML)] 
File Edit View Insert Modify Text Commands Site Window Help 


Files pssets: Е Shippets 
re ee 
ae | [Local view | м. 
sa С | $ % wy & | ca 


а@ Ste - Sitel (C:\Documents and S 
Lg webpict.html 


ЕСО: 


Рис. 3.6. Размещение области для будущего баннера 


Теперь необходимо указать ссылку к рисунку баннера, расположенному в Ин- 
тернете, а также адрес меб-сайта, на который должен ссылаться баннер. 


> Щелкните мышью на области для баннера. Прямоугольник будет обведен 
черной рамкой, а на панели инструментов Properties (Свойства) появятся 
элементы управления для работы с рисунками. 


> Введите в поле ввода Sre (Источник), расположенном на панели инстру- 
ментов Properties (Свойства), адрес рисунка баннера в Интернете, напри- 
мер значение http://www.banners.ru/banners/System1.gif. 


> Введите в поле ввода Link (Ссылка), расположенном на панели инстру- 
ментов Properties (Свойства), адрес меб-сайта, на который должен ссы- 
латься баннер, например, значение http://www.banners.ru. 


Обратите внимание, если вы подключены к Интернету и ввели ссылку к сущест- 
вующему рисунку, баннер отобразится автоматически. 


В данном разделе мы разобрали, что такое баннеры и как они используются, а 
также освоили способ размещения областей под баннеры на меБ-странице. 
Используя баннерные сети, мы имеем возможность существенно увеличить по- 
сещаемость своего Web-caHTa. 
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Теперь перейдем к такой важной теме, как создание гиперссылок на рисунках. Ta- 
ким образом, мы сможем создавать на своих Web -страницах графические меню. 


Создаем графическое меню 


На рисунках можно размещать области, которые будут обладать свойствами гипер- 
ссылок. Таким образом, можно создавать разнообразные графические меню. Все 
что необходимо - это нарисовать изображение, вставить его на \ммеб-страницу и вы- 
делить на нем области, которые будут выступать в роли гиперссылок. Совокуп- 
ность таких областей называется картой изображения. Мы рассмотрим пример 
использования карты изображения при создании графического меню. 


Предварительно необходимо нарисовать изображение графического меню, за- 
тем вставить рисунок графического меню Ha \ме-страницу и создать карту 
изображения. 


Будем считать, что рисунок уже подготовлен, поэтому вставим графический 
файл Ha меб-страницу. 


> Установите текстовый курсор в окне документа в позицию, в которую не- 
обходимо поместить рисунок. 


> Выберите команду меню Insert + Image (Вставка + Изображение). На экра- 
не появится диалог Select Image Source (Выбор источника изображения) 
(Puc, 3.4). 


> Выберите в диалоге Select Image Source (Выбор источника изображения) 
графический файл и щелкните мышью на кнопке ОК. Диалог Select Image 
Source (Выбор источника изображения) будет закрыт и появится диалог 
Image Tag Accessibility Attributes (Атрибуты доступности тэга рисунка) 
(Рис. 3.2), 


> В поле ввода Alternate text (Альтернативный текст) диалога Image Tag 
Accessibility Attributes (Атрибуты доступности тэга рисунка) введите 
текст, отображаемый вместо рисунка, например Главное меню. 


> Щелкните мышью на кнопке ОК. Диалог Image Tag Accessibility 
Attributes (Атрибуты доступности этикетки рисунка) будет закрыт, а в ок- 
не документа, в позиции, в которой расположен текстовый курсор, поя- 
вится рисунок (Рис. 3.7). 
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Главная 


Скачать, 


4 
0 
<body> {<p>! | [№ | @ [100% У 779х421 vl 2K} 1 sec] 


Рис. 3.7. Пример рисунка графического меню 


После того как рисунок был вставлен, необходимо создать специальные облас- 
ти, щелкая мышью на которых, пользователи будут переходить на другие web- 
страницы или меб-сайты. Эти области называются картой изображения. 


Сначала потребуется выделить рисунок. 


> Щелкните на рисунке мышью. Рисунок будет выделен, а на панели инст- 
рументов Properties (Свойства) отобразятся элементы управления свойст- 
вами рисунка. 


На панели инструментов Properties (Свойства) присутствуют элементы управ- 
ления, служащие для создания областей на рисунках: 


и Rectangular Hotspot Tool (Прямоугольный инструмент) — используется 
для создания прямоугольника; 


и Oval Hotspot Tool (Овальный инструмент) — используется для создания 
эллипса; 


и Polygon Hotspot Tool (Многоугольный инструмент) — используется для 
создания многоугольника. 


Чтобы создать прямоугольник, выполните следующие шаги. 


> Щелкните мышью на кнопке [Г] Rectangular Hotspot Tool (Прямоуголь- 
ный инструмент). 


И 
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> Установите указатель мыши в позицию рисунка, в которой будет распола- 
гаться верхняя левая вершина прямоугольника. 


> Нажмите и удерживайте левую кнопку мыши. 


> Не отпуская левую кнопку мыши, переместите указатель мыши в 
позицию, в которой будет располагаться нижняя правая вершина прямо- 
угольника. 


> Отпустите левую кнопку мыши. На рисунке появится прямоугольная об- 
ласть выделения. 


> На панели инструментов Properties (Свойства) в поле ввода Link (Ссылка) 
введите адрес меб-страницы, на которую должна ссылаться область, на- 
пример http://www.mysite.ru/paget.html. 


Точно также создаются и эллипсы, и многоугольники выделения (Рис. 3.8). 


<body> <p> <map>|<area>| ae hk & @ [100% +] 779 x 421 v! 3K / 1 sec!” 


Рис. 3.8. Пример создания областей на рисунке 


При щелчке мышью в пределах границ выделенной области будет происходить 
переход на страницу или файл, указанные в поле ввода Link (Ссылка) панели 
инструментов Properties (Свойства). 


В данном разделе мы рассмотрели пример создания графического меню. 
Используя карту изображения, становится легко создавать разнообразные гра- 
фические меню. Следует также отметить, что вы можете создать на одном ри- 
сунке несколько различных областей с ссылками на разные страницы и файлы. 
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Вставляем На$Й-анимации 


На сегодняшний день в Интернете можно встретить большое количество Web- 
страниц, на которых баннеры, меню или кнопки созданы с помощью Flash- 
анимации. Можно встретить даже такие меб-сайты, которые полностью созданы 
на основе Н!азП-анимации. 


Формат Flash разработан компанией Macromedia, и позволяет создавать растро- 
вую и векторную графику, текст, анимационные фильмы и даже целые про- 
граммы. Для профессиональной работы с НазИ-анимацией, компанией 
Macromedia разработана специальная программа Macromedia Flash, позволяю- 
щая создавать разнообразные анимации. Но и с помощью программы Масготе- 
dia Dreamweaver можно добавить на меб-страницу текст с каким-нибудь экзоти- 
ческим шрифтом или «живые» кнопки. Также мы можем добавить Ha Web- 
страницу программы просмотра изображений и Назй-фильмов, которые тоже 
созданы на основе На$П-анимации. Каждый На$П-элемент, который предостав- 
ляет программа Macromedia Dreamweaver, имеет несколько вариантов оформле- 
ния и готов к использованию на \еб-страницах. В данном разделе мы освоим 
приемы добавления на меб-страницу Ра$П-элементов, таких как текст и кнопки. 


К сожалению, программа Macromedia Dreamwever позволяет работать с Flash- 
анимацией лишь на английском языке. И даже директория, в которой сохранен 
меб-сайт, не должна содержать русских букв. Поэтому для экспериментов с 
На$й-анимацией следует создать новую \е-страницу и сохранить ее в директо- 
рии, не содержащей в пути русских букв. 


> Создайте новую меб-страницу и сохраните ее в директории, не содержа- 
щей русских букв, например C:\site1\webflash.html. 


Знакомство с технологией Flash мы начнем с текста. Вы, вероятно, помните, что 
для текста, размещенного на \меб-страницах назначается сразу группа шрифтов. 
То есть, никаких уникальных шрифтов использовать мы не можем. И эту про- 
блему призвана решить Ра$П-анимация. 


Вставляем Flash-tekct 


В качестве примера мы вставим в начале меб-страницы приветствие, причем 
использовать будем уникальный шрифт. Приступим... 


> Установите текстовый курсор в позицию, в которую необходимо вставить 
Flash-TekcT. 


> Выберите команду меню Insert +» Media + Flash Text (Вставка + Медиа + 
Flash-texcT). На экране появится диалог Insert Flash Text (Вставить Flash- 
текст) (Pre. 3.9), 
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ен Finch Text 


Size: 


|. Rollover color: to a 


Show Font 


Target: 


Bg color: 


Save as: | text2.swf 


Рис. 3.9. Диалог Insert Flash Text (Вставить Flash-mexcm) 
> Выберите в открывающемся списке Font (Шрифт) диалога Insert Flash Text 
(Вставить Flash-TekcT) любой доступный шрифт, например Comic Sans. 


> Введите в поле ввода текста Size (Размер) диалога Insert Flash Text (Вста- 
вить Flash-TekcT) значение размера шрифта, например 40. 


> Щелкните мышью на кнопке eal расположенной в группе элементов 
управления Color (Цвет), и в появившейся палитре выберите понравив- 
шийся цвет текста, например зеленый. 


Для придания эффектности текстовой надписи можно сделать так, чтобы при 
наведении указателя мыши на Flash-TekcT цвет текста изменялся. 


> Щелкните мышью на кнопке Г.] расположенной в группе элементов 
управления Rollover color (Цвет замены), и в появившейся палитре выбе- 
рите понравившийся цвет замены текста, например желтый. 


Как уже было отмечено ранее, текст можно вводить лишь на английском языке. 


> Введите в поле ввода текста Text (Текст) необходимый текст на англий- 
ском языке, например слово Welcome. 


Далее мы сделаем Tak, чтобы Flash-TekKcT выполнял роль гиперссылки. 


> В поле Link (Ссылка) диалога Insert Flash Text (Вставить Flash-TekcT) вве- 
дите ссылку на сайт в Интернете, например http://www.yandex.ru/. 
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В качестве ссылки вы можете также выбрать файл, располо- 
женный на локальном диске вашего компьютера, нажав кнопку 
Browse (Обзор), находящуюся справа от поля ввода Link (Ссыл- 
ка), и выбрав требуемый к загрузке файл. 


В случае, если вы выбрали файл, находящийся в папке, отличной 
от директории с файлами проекта, на экране появится диалог с 
запросом о копировании файлов. Нажмите кнопку Да (ОК), чтобы 
сохранить выбранный файл в папку проекта. 


Вы можете выбрать дополнительный параметр ссылки в открывающемся списке 
Target (Цель). Например, сделаем Tak, чтобы при щелчке Ha Flash-TekcTe, стра- 
ница, на которую ведет FlaSh-TeKcT, открывалась в новом окне. 


> В открывающемся списке Target (Цель) диалога Insert Flash Text (Вста- 
вить Н!азВ-текст), выберите значение _blank (Бланк). При щелчке на Flash- 
тексте страница будет открываться в новом окне. 


Теперь изменим цвет фона, на котором будет выводится Назй-текст. 


> Щелкните мышью на кнопке TI расположенной в группе элементов Bg 
со!ог (Цвет фона), и в появившейся палитре выберите понравившийся 
цвет для фона Flash-Tekcta, например светло-голубой. 


В поле ввода текста Save as (Сохранить как) можно указать имя файла, под ко- 
торым будет сохранен созданный нами Flash-oObext. Программа Macromedia 
Огеатмеауег автоматически вводит в данное поле ввода имя файла, под кото- 
рый сохранится файл в папке проекта. Поэтому оставим значение в данном поле 
ввода без изменений. 


Стоит отметить, что если путь к файлам вашего проекта со- 
держит русские буквы в названии папок, например Мои доку- 
менты или Рабочий стол, то при создании Flash-o6beKma бу- 
дет появляться диалог с информацией об ошибке. 


В этом случае следует нажать кнопку Browse (Обзор) в группе 
элементов управления Save as (Сохранить как) диалога Insert 
Flash Text (Вставить Flash-mexcm) и сохранить файл Flash в 
папке, путь к которой не содержит русских символов, например 
C:\flash\ под именем, допустим, flashobject1.swrf. 


> Нажмите кнопку ОК диалога Insert Flash Text (Вставить НазВ-текст). Диа- 
nor Insert Flash Text (Вставить НазВ-текст) закроется, и появится диалог 
Flash Accessibility Attributes (Атрибуты доступности Flash) (Рис. 3.10). 
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Рис. 3.10. Диалог Flash Accessibility Attributes 
(Атрибуты доступности Flash) 


> Введите в поле ввода текста Title (Название) диалога Flash Accessibility 
Attributes (Атрибуты доступности Flash) пояснительный текст, например 
Приветствие. 


> Нажмите кнопку ОК. Диалог Flash Accessibility Attributes (Атрибуты 
доступности Flash) будет закрыт, а в позиции, в которой расположен тек- 
стовый курсор, появится Flash-texct (Рис. 3. ыы 


г Unttled-1 hen . 


[100% _\|503х 145 | 1K/1 sec) 


Рис. 3.11. Новый Flash-mexcm 


Перед тем как просмотреть вставленный объект, выделим его. 


> Щелкните мышью на объекте Flash-TekcT. Объект будет выделен, а панель 
инструментов Properties (Свойства) изменится, и на ней появятся элемен- 
ТЫ И для изменения свойств Н!азП-элементов (Рис. 3.12). 


Flash Text W [133 _] File [цех 5 a [ Ed... Class 
lcm 


У space aa Quality Auto High | Align | Default У || Play 
H space = Scale | Default (Show all) ¥ | | Default (Show all) ¥ | all) v Bg | -| | #68CCFE 


Рис. 3.12. Панель инструментов Properties (Свойства) 
с элементами управления для изменения свойств На$П-элементов 
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Чтобы посмотреть, как Flash-Texct будет вести себя Ha меб-странице, выполните 
следующие действия. 


> Нажмите кнопку Play (Играть), которая расположена на панели инстру- 
ментов Properties (Свойства). Рамка выделения исчезнет, и Flash-TekcT 
будет вести точно также, как и на ме-странице. 


> Установите указатель мыши на объект Flash-TekcT со словом Welcome, 
расположенный на создаваемой странице. Цвет текста объекта изменится 
в соответствии с заданными ранее настройками и в нашем примере станет 
желтым. 


> Щелкните мышью на объекте \ММесоте. В новом окне откроется главная 
страница поисковой системы Япаех. 


Обратите внимание, кнопка Play (Играть) на панели инструментов Properties 
(Свойства) изменилась и теперь это уже кнопка Stop (Остановить). 


> Нажмите кнопку Stop (Остановить) на панели инструментов Properties 
(Свойства). Просмотр Н!азп-содержимого страницы будет остановлен. 


В любой момент вы можете изменить Flash-TekcT, вызвав диалог Insert Flash 
Text (Вставить ННа$В-текст). 


> Щелкните мышью на кнопке Edit (Редактировать) на панели инструментов 
Properties (Свойства). Откроется диалог Insert Flash Text (Вставить 
НазВ-текст). 


Мы рассмотрели основные принципы работы с Flash-TekcToM и теперь перейдем 
к рассмотрению работы с другими Flash-oObekTaMu — кнопками. 


Вставляем Flash-kHonku 


Дистрибутив программы Macromedia Dreamwever содержит большое количество 
различных кнопок, которые вы можете использовать на своих \Меб-страницах. 
Для примера вставим на нашу меб-страницу На$П-кнопку. 


> Установите текстовый курсор в позицию, в которую необходимо вставить 
Е азп-текст. 


> Выберите команду меню Insert + Media « Flash Button (Вставка + Медиа + 
Flash-kHonka). На экране появится диалог Insert Flash Button (Вставить 
Flash-kHonky) (Рис. 3.13). 
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Insert Flash Button 


Sample: 


Beveled Rect-Blue 
Beveled Rect-Bronze 
Beveled Rect-Green 
Beveled Rect-Grey 
Blip Arrow 

Blue Warper 


Button text: 

Font: У 
uke Г 
Target: y 


Bg color: 


Save as: | buttonS.swf 


Рис. 3.13. Диалог Insert Flash Button (Вставить На5й-кнопку) 


В списке Style (Стиль) находится большое количество шаблонов различных 
кнопок. При выборе значения из списка Style (Стиль) стиль кнопки отображает- 
ся в окне предварительного просмотра Sample (Пример). Кроме того, кнопки в 
окне Sample (Пример) интерактивны, то есть предоставляют возможность про- 
изводить на них действия. 


> 


Выберите в списке Style (Стиль) понравившийся стиль кнопки, например 
Beveled Rect-Blue. 


Введите в поле ввода текста Button text (Текст кнопки) текст, который 
будет отображен на кнопке, например Мат. 


Выберите в открывающемся списке Font (Шрифт) необходимый шрифт 
текста кнопки, например Arial. 


Введите в поле ввода текста Size (Размер) необходимый размер текста 
кнопки, например 14. 


Flash-kHonka обычно служит для выполнения действия по загрузке какого-либо 
файла или перехода на другую мер-страницу. 


> 


Введите в поле ввода Link (Ссылка) адрес меб-страницы или сайта, Ha 
который должна вести данная Flash-kHonka, например 
http://(www.yandex.ru/ для перехода на главную ме-страницу поисковой 
системы. 
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> В открывающемся списке Target (Цель) диалога Insert Flash Button 
(Вставить Flash-kHonky), выберите значение _blank (Бланк). При щелчке 
на Flash-kHonke страница будет открываться в новом окне. 


Вы можете выбрать цвет фона Flash-KHOMKH, щелкнув мышью на кнопке Г. 
расположенной в группе элементов управления Bg color (Цвет фона), и в поя- 
вившейся палитре выбрать понравившийся цвет. Если оставить данный пара- 
метр незаполненным, цвет фона кнопки будет белым. 


> Щелкните мышью на кнопке ОК. Диалог Insert Flash Button (Вставить 
Flash-kHonky) закроется, и на экране появится диалог Flash Accessibility 
Attributes (Атрибуты доступности Flash). 


> Введите в поле ввода текста Title (Название) название кнопки, например, 
На главную страницу. 


> Щелкните мышью на кнопке ОК. Диалог Flash Accessibility Attributes 
(Атрибуты доступности Flash) закроется, и в позиции, в которой располо- 
жен текстовый курсор, появится новая Н!азй-кнопка (Рис. 3.14). 


2| Code | 48} split | ii] Design | Title: [Untitled Document |S в, Ot. ®.. 


fe 
cu 


(Re) Q 100% ¥/503x 145% 1K/ 1 sec 


Рис. 3.14. Новая Flash-kuonka 


Чтобы посмотреть Flash-kHonky в действии, следует запустить просмотр. 


> Нажмите кнопку Play (Играть), которая расположена на панели инстру- 
ментов Properties (Свойства). Рамка выделения исчезнет, и Н!азп-кнопка 
будет вести точно также, как и на меб-странице. 


> Установите указатель мыши Ha Flash-TekcT со словом Main, расположен- 
ным на создаваемой странице. Цвет кнопки изменится в соответствии с 
выбранным шаблоном. 


> Щелкните мышью на кнопке Мат. В новом окне откроется главная стра- 
ница поисковой системы Andex. 


Кнопка Play (Играть) на панели инструментов Properties (Свойства) преврати- 
лась в кнопку Stop (Остановить). 
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В любой момент вы можете изменить Flash-kKHonky, вызвав диалог Insert Flash 
Button (Вставить НазВ-кнопку). Прежде чем изменять параметры объекта, сле- 
дует остановить просмотр. 


> Нажмите кнопку Stop (Остановить) на панели инструментов Properties 
(Свойства). Назй-объект будет заключен в черную рамку, а кнопка Stop 
(Остановить) превратится в кнопку Play (Играть). 


> Щелкните мышью на кнопке Edit (Редактировать) на панели инструментов 
Properties (Свойства). Откроется диалог Insert Flash Text (Вставить Flash- 
кнопку), содержащий элементы управления для изменения параметров 
объекта. 


Благодаря Flash-kHonmkaM и тексту, вы сможете раскрасить и сделать более при- 
влекательной любую страницу своего меб-сайта. А для добавления еще большей 
эффектности вашему проекту, мы рассмотрим способ сделать меб-страницу 
звучащей. 


Добавляем в м/еб-страницу звук 


Возможно, вы встречали в Интернете меб-страницы, на которых играет незатей- 
ливая мелодия или после какого-либо действия на сайте воспроизводится какой- 
нибудь звук. Далее мы на примере разберем один из способов сделать web- 
страницу звучащей. 


Для экспериментов вам понадобятся звуковые файлы, поэтому заранее подбери- 
те подходящие, не очень большого объема, иначе страница с добавленной музы- 
кой будет загружаться очень длительное время. 


> Скопируйте звуковые файлы в корневую папку вашего проекта мер-сайта. 


Действие посетителя, будь то щелчок мышью или переход по ссылке, при кото- 
ром будет воспроизводиться звук, называется событием. В программе Масготе- 
dia Dreamwever существует панель инструментов, элементами управления KOTO- 
рой для каждого элемента на меб-странице можно установить ответное действие 
на любое событие. Данная панель инструментов называется Tag Inspector (Ин- 
спектор тегов). 


> Щелкните левой кнопкой мыши на заголовке панели инструментов Tag 
Inspector (Инспектор тегов), которая находится в правой части главного 
окна программы. Панель инструментов Tag Inspector (Инспектор тегов) 
развернется. 


На панели инструментов Tag Inspector (Инспектор тегов) есть две вкладки. Нам 
понадобится вкладка Behaviors (События). 
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> Щелкните мышью на ярлыке Behaviors 
(События) для перехода к необходимой 
нам вкладке (Рис. 3.15). 


Теперь следует выделить на \меб-странице 
элемент, события от которого заставят вос- 
производиться звук. 


> Создайте новую ме-страницу. 


> Вставьте на страницу любой объект, на- 
пример, рисунок, как описывалось ранее. 


> Щелкните мышью на вставленном объ- 
екте. Объект будет выделен. 


Обратите внимание, что заголовок панели 
инструментов Tag Inspector (Инспектор 


Рис. 3.15. Панель инструментов 
Tag Inspector (Инспектор тегов) 


тегов) зависит от выделенного элемента на меб-странице. Так как в нашем при- 
мере выделен рисунок, заголовок данной панели инструментов принял вид Tag 
<img> (Ter <img>). Значение img, которое находится в угловых скобках, это тег 


языка разметки HTML. 


> Щелкните мышью на кнопке cal расположенной Ha панели инструментов 
Tag Inspector (Инспектор тегов), чтобы добавить событие. На экране поя- 


вится меню (Рис. 3.16). 


Call JavaScript 
Change Property 
Check Browser 
Check Plugin 


Control Shockwave ог Flash 


Hide Pop-Up Menu 
Jump Menu 
Jump Menu Go 


Open Browser Window 


Play Sound 

Popup Message 
Preload Images 
Set Nav Bar Image 
Set Text 

Show Pop-Up Menu 
Show-Hide Lavers 
Swap Image 

Swap Image Restore 
Timeline 

Validate Forrn 


| 
| 
Drag Layer 
Go To URL 
| 
Show Events For 


Get More Behaviors... 


Рис. 3.16. Меню для выбора действия в ответ на событие 
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> В появившемся меню выберите команду Play Sound (Воспроизвести звук). 
На экране появится диалог Play Sound (Воспроизвести звук) (Рис. 3.17). 


еее. 


Рис. 3.17. Диалог для выбора звукового файла 


> Щелкните мышью на кнопке Browse (Обзор) диалога Play Sound (Вос- 
произвести звук) и выберите необходимый звуковой файл. 


> Щелкните мышью на кнопке ОК. Диалог Play Sound (Воспроизвести звук) бу- 
дет закрыт, а для вставленного ранее объекта будет добавлено новое событие. 


На панели инструментов Tag Inspector (Инспектор тегов) в главном списке поя- 
вится строка, в левой части которой расположено название события, а в правой 
части указано действие Play Sound (Воспроизвести звук) (Рис. 3.18). 


Рис. 3.18. События в панели инструментов 
Tag Inspector (Инспектор тегов) 


Таким образом, при щелчке мышью на объекте будет воспроизведен указанный 
звуковой файл. 


Обратите внимание, что левая часть строки в списке панели инструментов Тад 
Inspector (Инспектор тегов) является в то же время открывающимся списком. 


> Щелкните мышью на названии события ONClick (При щелчке), в левой 
части строки главного списка панели инструментов Tag Inspector (Ин- 
спектор тегов). Левая часть строки примет вид открывающегося списка. 


> Выберите в открывающемся списке необходимое событие, например зна- 
чение OnNDbIClick (При двойном щелчке). 
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Вы можете также выбрать событие onFocus (На фокус), при 
котором звуковой файл будет воспроизведен в момент, когда 
пользователь установит указатель мыши на элемент web- 
страницы. 


Мы освоили основной принцип создания звучащих Меб-страниц, помогающих 
создать неповторимую атмосферу на web-caiite. Поэкспериментировав с на- 
стройками уже самостоятельно, вы добьетесь удивительных результатов и смо- 
жете превратить невзрачный сайт в настоящий шедевр ммеб-дизайна. 


Заключение 


В этой главе мы рассмотрели основные способы вставки рисунков на web- 
страницу, приемы создания графических меню и баннеров. Мы также попробо- 
вали придать эффектность меб-странице, добавив звуковое оформление. 


Стоит, однако, иметь в виду, что добавляя на свои Меб-страницы графику и звук, 
важно не перегрузить сайт мультимедийными объектами. В отличие от текста, 
рисунки и звуки зачастую довольно объемны, а многие пользователи Интернета 
используют низкоскоростные соединения, вследствие чего ваш меб-сайт может 
загружаться очень длительное время. 


ГЛАВА 4. 
Добавляем на м/еБ-страницу фреймы 
и учимся перемешаться между ними 


В данной главе мы рассмотрим основы фреймового дизайна, его достоинства и 
недостатки. Подробно разберем, что такое фреймы и наборы фреймов. А также 
освоим принципы создания и использования фреймов при создании \меб-сайтов. 


Что такое фреймы и для чего они нужны 


Ранее вы познакомились с табличным дизайном и узнали, что меб-страницу мож- 
но разделить на несколько блоков, например, на заголовок \меб-сайта, колонку 
навигации, строку с авторскими правами и непосредственно основное содержи- 
мое. А ведь чаще всего множество м/еб-страниц одного меб-сайта различаются 
лишь блоком основного содержимого. Но при табличном дизайне каждая web- 
страница содержит все блоки, таким образом, после перехода на другую страницу, 
на компьютер пользователя вместе с новой информацией снова загружается и ра- 
нее загруженная. Это приводит к большему размеру меБ-страниц, а следовательно 
и к большему времени их загрузки на компьютер пользователя. Давайте посмот- 
рим, каким образом нам может помочь фреймовый м/еб-дизайн для ускорения ра- 
боты меб-сайта на компьютере конечного пользователя. 


Язык разметки HTML позволяет разбить окно обозревателя Интернета на облас- 
ти — фреймы, в каждую из которых может быть загружена отдельная web- 
страница. Причем у каждого фрейма есть определенное имя, которое можно вы- 
брать в качестве Цели (Target) гиперссылки, тем самым выбрав фрейм, в который 
будет загружена необходимая меб-страница. Таким образом, в одном фрейме у 
нас может располагаться \Меб-страница, содержащая лишь блок навигации. А в 
другом фрейме — меб-страница, содержащая лишь основное содержимое. В ре- 
зультате на компьютер пользователя будут загружаться только новые Wweb- 
страницы, которые не содержат никаких лишних блоков. На лицо экономия тра- 
фика и времени загрузки сайта у конечных пользователей. Кроме того, используя 
фреймы, в дальнейшем легко расширить \меб-сайт. Например, когда требуется 
добавить на Web-caiiT еще одну страницу, то приходится добавлять гиперссылку в 
блок навигации каждой страницы. А используя фреймовый меб-дизайн, необхо- 
димо будет изменить лишь одну Меб-страницу, содержащую блок навигации. 


Совокупность всех используемых фреймов называется набором фреймов. При 
использовании фреймов создается одна головная \меб-страница, которая содер- 
жит свойства набора фреймов, такие как количество, ширина фреймов и другие, 
а также свойства самих фреймов, например адреса меб-страниц, которые будут 
загружены в эти фреймы. Обратим ваше внимание на то, что в строке адреса 
обозревателя Интернета пользователей почти всегда будет набран именно адрес 
этой головной меб-страницы. 
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Теперь, чтобы лучше разобраться с фреймовым \меб-дизайном, приступим к CO3- 
данию набора фреймов. 


Создание набора фреймов 


В данном разделе мы создадим набор фреймов состоящий из фреймов для сле- 
дующих блоков: 


Y Заголовок web-caiita; 

и’ Набор гиперссылок для навигации по web-caity; 
Y Основное содержимое; 

и Сведения об авторских правах. 


Впоследствии мы без труда сможем добавить новые фреймы под какие-либо 
блоки, а также удалить лишние. 


> Выберите команду меню File + New (Файл + Создать). На экране появится диа- 
лог New Document (Новый документ). 


> Выберите в списке Category (Категории) диалога New Document (Новый 
документ) значение Framesets (Наборы фреймов). Содержимое диалога New 
Document (Новый документ) изменится (Рис. 4.1). 


New Document 


reese esse reeves: еее EES SNR ET ESET OES ES ESTEES ESSENSE TESTS ET EEEE ES SES ER EEEY: 


Category: Framesets: Preview: 


Sa sian eee 

Basic page Fixed Bottom т 

Dynamic page Fixed Bottom, Nested Left 

Template page Fixed Bottom, Nested Righ 

Other Fixed Left 

CSS Style Sheets Fixed Left, Nested Bottom 

Framesets Fixed Left, Nested Top 

Page Designs (C55) Fixed Right 

Starter Pages Fixed Right, Nested Bottor 

Page Designs Fixed Right, Nested Top 

Fixed Top 

Fixed Top, Fixed Bottom 

Fixed Top, Nested Left 

Fixed Top, Nested Right eas 

Split Horizontal Description: 

Split Vertical ГА frameset split horizontally witha  ^ 
ifixed-size bottom frame. 


[55 
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Document Type (DTD): 
HTML 1.0 Transitional 


Рис. 4.1. Диалог New Document (Новый документ) 
для создания набора фреймов 
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В центре диалога New Document (Новый документ) расположен список 
Framesets (Наборы фреймов), который содержит различные варианты разметки 
меб-страницы. В правой части диалога New Document (Новый документ) в окне 
Preview (Предварительный просмотр) наглядно отображаются варианты разде- 
ления, которые вы выбираете в списке Framesets (Наборы фреймов). 


Для начала создадим фреймы под заголовок, основное содержимое и сведения 
об авторских правах. 


> Выберите в списке Framesets (Наборы фреймов) значение Fixed Top, Fixed 
Bottom (Фиксированный верх, фиксированный низ). Содержимое окна Preview 
(Предварительный просмотр) изменится. 


> Нажмите кнопку Create (Создать). Диалог New Document (Новый документ) 
закроется, а на экране появится диалог Frame Tag Accessibility Attributes (Ат- 
рибуты доступности тэга фрейма) (Рис. 4.2). 


Frame Tag Accessibility Attributes 


For each frame, specify a title, 


Frame: |bottomFrame м 
Title: | bottomFrame 


If you dont want to enter this 
information when inserting objects, 


change the Accessibility preferences. 


Рис. 4.2. Диалог Frame Tag Accessibility Attributes 
(Атрибуты доступности тэга фрейма) 


В диалоге Frame Tag Accessibility Attributes (Атрибуты доступности тэга 
фрейма) можно задать заголовки фреймов. Заголовки фреймов не отображаются 
на экране, однако могут быть использованы какими-либо другими программами 
в качестве служебной информации. 


Верхний фрейм будет содержать заголовок, для этого выполните следующие 
действия. 


> Выберите в списке Frame (Фрейм) значение topFrame (Верхний фрейм). 


> Введите в поле ввода текста Title (Название) заголовок фрейма, например 
Заголовок. 


Нижний фрейм будет содержать сведения об авторских правах. 
> Выберите в списке Frame (Фрейм) значение bottomFrame (Нижний фрейм). 


> Введите в поле ввода текста Title (Название) заголовок фрейма, например Ав- 
торские права. 
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Главный фрейм будет содержать основное содержимое. 
> Выберите в списке Frame (Фрейм) значение mainFrame (Главный фрейм). 


> Введите в поле ввода текста Title (Название) заголовок фрейма, например Ос- 
новное содержимое. 


> Нажмите кнопку ОК. Диалог Frame Tag Accessibility Attributes (Атрибуты дос- 
тупности тэга фрейма) закроется, и в окне программы будет отображен новый 
документ с набором фреймов (Рис. 4.3). 
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Puc. 4.3. Набор фреймов в окне документа 


Итак, мы создали фреймы для заголовка, для основного содержимого и для све- 
дений об авторских правах. Но нам не обойтись без набора гиперссылок для на- 
вигации по web-cality. Поэтому давайте рассмотрим процесс добавления нового 
фрейма к уже созданному. 


Добавим фрейм для набора гиперссылок, расположив его слева от фрейма ос- 
новного содержимого. 


> Выберите в открывающемся списке на панели инструментов Insert (Вставка) 
значение Layout (Формат). Содержимое панели инструментов Insert (Вставка) 
изменится (Рис. 4.4). 


| Standard Layout 


Рис. 4.4. Панель инструментов Insert (Вставка), группа Layout (Формат) 
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> Щелкните мышью Ha открывающемся списке Frames (Фреймы), который 
расположен на панели инструментов Insert (Вставка). На экране появится список 
с различными вариантами добавления фреймов на меб-страницу (Рис. 4.5). 


_ | Left Frame 


_ | Тор Frame 


__| Bottom Frame 


__| Bottom and Nested Left Frame 
| Bottom and Nested Right Frame 

|} Left and Nested Bottom Frame 
|] Right and Nested Bottom Frame 
__| Top and Bottom Frames 
Left and Nested Top Frames 
Right and Nested Top Frame 
Top and Nested Left Frames 


Top and Nested Right Frame 


Рис. 4.5. Значение открывающегося списка Frames (Фреймы) 
на панели инструментов Insert (Вставка) 


Рассмотрим значения открывающегося списка Frames (Фреймы), расположен- 
ного на панели инструментов Insert (Вставка). В зависимости от текущего 
фрейма, в который установлен текстовый курсор: 


Y значение Left Frame (Левый фрейм) создает фрейм слева от текущего; 

Y значение Right Frame (Правый фрейм) создает фрейм справа от текущего; 
Y значение Top Frame (Верхний фрейм) создает фрейм сверху от текущего; 
значение Bottom Frame (Нижний фрейм) создает фрейм снизу от текущего; 
и 


значение Bottom and Nested Left Frame (Нижний и встроенный левый фрейм) 
создает фрейм снизу от текущего, а также еще один фрейм слева от текущего; 


< 


значение Bottom and Nested Right Frame (Нижний и встроенный правый 
фрейм) создает фреймы снизу и справа от текущего; 


Y значение Left and Nested Bottom Frame (Левый и встроенный нижний 
фрейм) создает фреймы слева и снизу OT текущего; 


Y значение Right and Nested Bottom Frame (Правый и встроенный нижний 
фрейм) создает фреймы справа и снизу OT текущего; 


Y значение Тор and Bottom Frames (Верхний и нижний фреймы) создает 
фреймы сверху и снизу от текущего; 


Добавляем Ha меБ-страницу фреймы и учимся перемещаться между ними 97 


Y значение Left and Nested Top Frames (Левый и встроенный верхний фрей- 
мы) создает фреймы слева и сверху от текущего; 


Y значение Right and Nested Top Frame (Правый и встроенный верхний 
фрейм) создает фреймы справа и сверху OT текущего; 


и значение Top and Nested Left Frames (Верхний и встроенный левый фрей- 
мы) создает фреймы сверху и слева от текущего; 


Y значение Тор and Nested Right Frame (Верхний и встроенный правый 
фрейм) создает фреймы сверху и справа от текущего. 


Обратите внимание, что слева от каждого значения списка Frames (Фреймы) 
расположен пояснительный рисунок, в котором наглядно изображен создавае- 
мый результат. 


Создадим новый фрейм, расположив его слева от основного содержимого. 


> Щелкните мышью на фрейме для основного содержимого. Фрейм станет теку- 
щим, и в нем появится текстовый курсор. 


> Выберите в открывающемся списке Frames (Фреймы), расположенном на 
панели инструментов Insert (Вставка), значение Left Frame (Левый фрейм). 
Слева от текущего фрейма будет добавлен новый фрейм для гиперссылок, и 

. на экране появится диалог Frame Tag Accessibility Attributes (Атрибуты 
доступности тэга фрейма). 


Так как мы создали фрейм слева, то новый фрейм будет иметь название 
leftFrame (Левый фрейм). 


> Выберите в открывающемся списке Frame (Фрейм) диалога Frame Tag 
Accessibility Attributes (Атрибуты доступности тэга фрейма) значение 
leftFrame. 


> Введите в поле ввода текста Title (Название) диалога Frame Tag 
Accessibility Attributes (Атрибуты доступности тэга фрейма) заголовок 
фрейма, например Навигация. 


> Нажмите кнопку ОК. Диалог Frame Tag Accessibility Attributes (Атрибуты 
доступности тэга фрейма) закроется. 


Вы всегда можете удалить любой фрейм. Для этого следует ус- 
тановить указатель мыши на границу удаляемого фрейма. Нажав 
и удерживая левую кнопку мыши, переместите указатель мыши к 
границе набора фреймов. После того как вы отпустите кнопку 
мыши, фрейм будет удален. 


Теперь, когда все необходимые нам фреймы созданы, приступим к сохранению 
набора фреймов и меБ-страниц, которые в этих фреймах располагаются. 


4- 6268 
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> Выберите команду меню File + Save All (Файл + Сохранить все). На экране поя- 
вится диалог Save As (Сохранить как) (Рис. 4.6). 
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Puc. 4.6. Диалог Save As (Сохранить как) 
Программа Macromedia Dreamweaver сначала предложит сохранить набор фрей- 
MOB, а уж затем поочередно ме-страницы, который располагаются во фреймах. 


Фрейм, который в данный момент сохраняется, будет выделен толстой штрихо- 
вой рамкой. 


> Выберите в открывающемся списке Папка (Folder), расположенном в диа- 
логе Save As (Сохранить как), диск и папку, в которую необходимо со- 
хранить файлы. 


> Введите в поле ввода Имя файла (File name) имя, под которым необходимо со- 
хранить файл. 


К примеру, для удобства вы можете использовать следующие имена файлов: 
( набор фреймов — myframeset.html; 

и фрейм для заголовка — title.html; 

и’ фрейм для сведений об авторских правах — copyright.html; 

фрейм для набора гиперссылок — navig.html; 


и фрейм для основного содержимого — main.html. 
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> Нажмите кнопку ОК. Диалог Save As (Сохранить как) закроется, а набор фрей- 
мов и расположенные в них Меб-страницы будут сохранены. 


Далии мы рассмотрим процесс заполнения созданных фреймов. 


Заполнение фреймов 


В данном разделе мы познакомимся со способами изменения свойств фреймов. 
Затем заполним фреймы содержимым и освоим приемы оформления содержи- 
мого фреймов. 


Чтобы работать с фреймами было удобнее, в программе Macromedia 
Dreameweaver существует панель инструментов Frames (Фреймы). 


> Выберите команду меню Window + Frames (Окно + Фреймы). В правой части 
окна программы Macromedia Dreameweaver появится панель инструментов 
Frames (Фреймы) (Рис. 4.7). 


bottomFrame 


Рис. 4.7. Панель инструментов Frames (Фреймы) 


Панель инструментов Frames (Фреймы) схематично отображает структуру на- 
бора фреймов. Данная панель инструментов позволяет быстро выбирать необхо- 
димые объекты. Как видно из схематического изображения документа на данной 
панели инструментов, мы имеем набор фреймов, в котором находятся фреймы 
topFrame (Верхний фрейм), leftFrame (Левый фрейм), mainFrame (Главный 
фрейм) и bottomFrame (Нижний фрейм). 


Теперь приступим к работе и начнем с изменения свойств первого набора фреймов. 


> Щелкните мышью на рамке фрейма topFrame (Верхний фрейм) на панели инст- 
рументов Frames (Свойства). Рамка фрейма будет выделена, а содержимое па- 
нели инструментов Properties (Свойства) изменится (Рис. 4.8). 


Frameset Borders | No 
Rows: 3 


Cols: Border width co. | 


Value Units 


9] Selection 


Рис. 4.8. Панель инструментов Properties (Свойства) с элементами управления, 
служащими для изменения свойств набора фреймов 
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С помощью элементов управления, расположенных Ha панели инструментов 
Properties (Свойства), можно изменить высоту фреймов. Чтобы выбрать фрейм, 
высоту которого требуется изменить, на панели инструментов Properties (Свой- 
ства) в группе RowCol Selection (Выбор строки или столбца) расположен эле- 
мент управления в виде схематичного изображения фреймов (Рис. 4.9). 


Рис. 4.9. Схематичное изображение фреймов 
на панели инструментов Properties (Свойства) 


А в поле ввода текста Value (Значение), расположенном в группе элементов 
управления Row (Строка) панели инструментов Properties (Свойства), вводится 
высота фрейма, причем в открывающемся списке слева требуется указать еди- 
ницу измерения: 


и значение Pixels (Пикселы) для задания высоты в пикселах; 


и значение Percent (Процент) для задания высоты в процентах от оставшегося 
свободного значения высоты; 


Y значение Relative (Относительный) для выбора всего доступного значения 
ВЫСОТЫ. 


В нашем примере высота верхнего и нижнего фрейма постоянна и равна 80 пик- 
селам у каждого фрейма. А высота среднего фрейма будет занимать все остав- 
шееся пространство окна программы — обозревателя Интернета. 


Изменим высоту нижнего фрейма. 


> Выберите нижний фрейм в группе RowCol Selection (Выбор строки или столб- 
ца), расположенной на панели инструментов Properties (Свойства). 


> Введите в поле ввода текста Маше (Значение), расположенном в группе элемен- 
тов управления Row (Строка), значение высоты фрейма, например 50. 


> Убедитесь, что в открывающемся списке Units (Единицы измерения), 
расположенном в группе элементов управления Row (Строка), выбрано значение 
Pixels (Пикселы). 


Также, с помощью панели инструментов Properties (Свойства), вы можете вы- 
брать параметры рамки. Например, сделаем так, чтобы рамка не отображалась. 


> Убедитесь, что в открывающемся списке Вогаег$ (Границы) выбрано зна- 
чение No. 
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Изменим свойства внутреннего набора фреймов. 


> Щелкните мышью на рамке внутреннего набора фреймов на панели инструмен- 
тов Frames (Фреймы). 


Обратите внимание, что схематичное изображение фреймов на панели инстру- 
ментов Properties (Свойства) изменится и будет изображать левый и правый 
фреймы. Кроме того, вместо высоты вы сможете изменять ширину. А поле ввода 
текста Row (Строка) будет изменено на поле ввода текста Column (Столбец). 


Увеличим ширину фрейма для набора гиперссылок. 


> Выберите левый фрейм в группе RowCol Selection (Выбор строки или столбца), 
расположенной на панели инструментов Properties (Свойства). 


> Введите в поле ввода текста Value (Значение), расположенном в группе элемен- 
тов управления Column (Столбец), значение высоты фрейма, например 180. 


> Убедитесь, что в открывающемся списке Units (Единицы измерения), располо- 
женном в группе элементов управления Column (Столбец), выбрано значение 
Pixels (Пикселы). 


Таким образом, вы можете изменить размеры любого фрейма вашего проекта. 
А теперь рассмотрим приемы изменения параметров отдельных фреймов. 


> Щелкните мышью на фрейме topFrame (Верхний фрейм), расположенном на 
панели инструментов Frames (Фреймы). Содержимое панели инструментов 
Properties (Свойства) изменится, и отобразятся элементы управления парамет- 
рами отдельных фреймов (Рис. 4.10). 


vet Frame name Src (title, html o© Borders [No | 


[topFrame _ | м. [¥] No resize Border color ie 


Puc. 4.10. Панель инструментов Properties (Свойства) 
для изменения параметров фреймов 


Выбрав необходимое значение в открывающемся списке Scroll (Прокрутка), вы 
можете определить наличие у редактируемого фрейма полос прокрутки: 


Y значение No (Нет) — не отображать полосы прокрутки; 
и значение Yes (Да) — всегда отображать полосы прокрутки; 
VY значение Auto (Авто) — отображать полосы прокрутки при необходимости; 


Y значение Default (По умолчанию) — соответствует настройкам обозревателя 
Интернета. 


Вы также можете запретить пользователям изменять размеры фреймов. 
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> Установите флажок No resize (Нет изменению размера). 


Мы рассмотрели основные параметры фреймов, настройка которых вам может 
понадобиться при создании своих первых проектов. А теперь приступим к за- 
полнению фреймов. 


> Щелкните мышью на верхнем фрейме в окне документа. В указанном фрейме 
появится текстовый курсор. 


Заполнение и оформление фреймов не отличается от заполнения и оформления 
обычных М/еБ-страниц. 


> Введите любой текст, например Здесь будет располагаться заголовок и 
эмблема сайта. 


Перейдем к фрейму для сведений об авторских правах. 


> Щелкните мышью на нижнем фрейме в окне документа. В указанном фрейме 
появится текстовый курсор. 


> Введите текст, например Здесь будут располагаться сведения об автор- 
ских правах. 


Изменим содержимое фрейма, который будет содержать набор гиперссылок. 


> Щелкните мышью на фрейме, созданном для набора гиперссылок, в окне доку- 
мента. В указанном фрейме появится текстовый курсор. 


> Введите текст, например Раздел гиперссылок. 
Наполним содержимым основной фрейм. 


> Щелкните мышью на фрейме для основного содержимого. В указанном фрейме 
появится текстовый курсор. 


> Введите любой текст, например краткое приветствие посетителям вашего 
м\еб-сайта. 


Наш проект стал примерно таким, как изображено на Рис. 4.11. 


Обратим ваше внимание, что заполнение и оформление фреймов не отличается 
от работы с обычными меб-страницами. В любом фрейме вы можете разместить 
текст, рисунки, таблицы и другие объекты. 


Сохраним проект. 
> Выберите команду меню File + Save All (Файл + Сохранить все). 


На данном этапе программа Macromedia Dreamweaver выводить дополнительные 
диалоги на экран не будет, и результаты изменений будут сохранены в ранее 
указанные файлы. 
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Puc. 4.11. Фреймы с содержимым 


Мы рассмотрели методы заполнения фреймов, а также приемы изменения 
свойств наборов фреймов и отдельных фреймов. Далее вы познакомитесь со 
способами навигации по фреймам, после чего вы сможете создавать профессио- 
нальные меб-сайты на основе фреймового меб-дизайна. 


Навигация по фреймам 


В данном разделе мы подробно рассмотрим приемы создания гиперссылок для 
проектов сайтов на основе фреймового меб-дизайна. А также подробно разбе- 
рем параметр Target (Цель) гиперссылки. 


Как было отмечено ранее, каждый фрейм имеет уникальное имя. Данное имя 
мы можем указать в параметре Target (Цель) гиперссылки, тем самым выбирая 
в какой фрейм загрузится связанная с гиперссылкой \меб-страница. Поэтому 
создадим новую \Меб-страницу, которая будет загружаться в фрейм для основ- 
ного содержимого. 


> Создайте новую Меб-страницу. 


> Введите на данную \меб-страницу какой-нибудь текст, например Это 
страница 2. 


> Сохраните данную меб-страницу под именем page2.html. 
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Вернемся к нашему набору фреймов. В заголовке окна документа расположены 
вкладки, с помощью которых можно переключаться между документами. 


> 


Щелкните мышью на первой вкладке окна документа. В окне документа отобра- 
зится наш фреймовый документ. 


Добавим гиперссылки в соответствующий фрейм. 


> 


Щелкните мышью Ha фрейме для набора гиперссылок. В данном фрейме поя- 
вится текстовый курсор. 


Установите текстовый курсор в позицию, в которую необходимо вставить 
гиперссылку. 


Выберите команду меню Insert + Hyperlink (Вставка + Гиперссылка). На экране 
появится диалог Hyperlink (Гиперссылка) (Рис. 4.12). 


Hyperlink 


co ИИ 


ла аллее лада лежал 


Title: [| 


ЕЕ 


Accesskey: | __ 
Tab index: [ 


Puc. 4.12. Диалог Hyperlink (Гиперссылка) 


Введите в поле ввода Text (Текст) текст гиперссылки, например На главную. 


Щелкните мышью на кнопке [> Browse (Обзор), расположенной слева от 


открывающегося списка Link (Ссылка). На экране появится диалог Select File 
(Выбор файла) (Рис. 4.13). 


Выберите любой файл, например main.html. В поле ввода Имя файла (File 
пате) появится имя выбранного файла. 


Нажмите кнопку ОК. Диалог Select File (Выбор файла) закроется. В поле ввода 
Link (Ссылка) диалога Hyperlink (Гиперссылка) появятся путь и название вы- 
бранного файла. 
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Select File 


Select file name from: ©) File system Cres and Saree: 


© Data sources 


© Unnamed Site 


nT 
main. html 
#2) myframeset.html 


$] navig. html 
€) page2. html 


Alfies(") + => 
eet) 


Relative to: Document у | navig. html 


Change default Link Relave Том the site definition. 


Puc. 4.13. Диалог Select File (Выбор файла) 


Важным параметром для навигации по фреймам служит параметр Target (Цель). 
Некоторые значения открывающегося списка Target (Цель) мы уже рассматривали 
ранее. Рассмотрим значения открывающегося списка Target (Цель) более подробно: 


и’ _blank (Бланк) — меб-страница загружается в новое окно обозревателя Ин- 
тернета; 


и _self (Сам) — меб-страница загружается во фрейм, в котором расположена 
данная гиперссылка; 


и’ _parent (Родитель) — меб-страница загружается во фрейм набора фреймов 
более высокого уровня; 


Y ор (Верх) — меб-страница загружается в текущее окно обозревателя Ин- 
тернета; 


Y имя_фрейма — м/еб-страница загружается в указанный фрейм. 


Нам необходимо, чтобы меб-страница загружалась в фрейм для основного 
содержимого. Данный фрейм имеет имя MainFrame, поэтому выполните сле- 
дующие действия. 


> Выберите в открывающемся списке Target (Цель) значение татЕгате. 


> Нажмите кнопку ОК. Диалог Hyperlink (Гиперссылка) закроется, а в позиции, в 
которой расположен текстовый курсор, появится гиперссылка. 


Добавим еще одну гиперссылку в том же фрейме, на следующей строке. 
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> Нажмите клавишу [Enter], Текстовый курсор будет установлен Ha следующую по- 
сле добавленной гиперссылки строку. 


> Выберите команду меню Insert + Hyperlink (Вставка + Гиперссылка). На экране 
появится диалог Hyperlink (Гиперссылка). 


> Введите в поле ввода Тех{ (Текст) текст гиперссылки, например На вторую 
страницу. 


> Щелкните мышью на кнопке [> Browse (Обзор), расположенной слева от 


открывающегося списка Link (Ссылка). На экране появится диалог Select File 
(Выбор файла). 


> Выберите ранее созданный файл page2.html. В поле ввода Имя файла (File 
пате) появится имя выбранного файла. 


> Нажмите кнопку ОК. Диалог Select File (Выбор файла) закроется. В поле ввода 
Link (Ссылка) диалога Hyperlink (Гиперссылка) появятся путь и название вы- 
бранного файла. 


> Выберите в открывающемся списке Target (Цель) значение mainFrame. 


> Нажмите кнопку ОК. Диалог Hyperlink (Гиперссылка) закроется, а в позиции, 
в которой расположен текстовый курсор, появится гиперссылка. 


Сохраним полученные результаты, а затем просмотрим проект в ассоциирован- 
ной программе. 


> Выберите команду меню File + Save All (Файл + Сохранить все). Проект будет 
сохранен. 


> Выберите команду File + Preview in Browser + 1Ехр/огег 6.0 (Файл + Просмотр в 
браузере + [Explorer 6.0). На экране появится окно обозревателя Интернета с на- 
шей меб-страницей (Рис. 4.14). 


Стоит отметить, что название программы — обозревателя 
Интернета может отличаться от указанного в примере. 


В окне обозревателя Интернета вы видите меб-страницу такой, какой ее увидят по- 
сетители. Попробовав перейти по созданным нами гиперссылкам, вы убедитесь, как 
просто и удобно становится работать с проектом вашего сайта. 
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Здесь будет располагаться заголовок и эмблема сайта. 


Раздел гиперссылок Добро пожаловать Ha мой \еб-сайт. 


Наглавную 


На вторую страницу 


Здесь будут располагаться сведения об авторских правах. 


|| Mori компьютер — 


Рис. 4.14. Готовая \УеБ-страница 


Заключение 


В данной главе мы рассмотрели приемы работы с фреймовым дизайном. Мы 
создали набор фреймов, заполнили каждый фрейм содержимым. А также разо- 
брались с навигацией по фреймами и создали несколько гиперссылок. 


В следующей главе мы познакомимся с приемами создания Меб-порталов. Pac- 
смотрим принципы их работы и «попробуем на ощупь» движок для построения 
\м!еб-порталов. 


ЕААЕА- а 
Осваиваем бесплатный лвижок XOOPS 


Первое знакомство с XOOPS 2.х.х 


В предыдущих главах мы рассматривали создание меб-страниц и ме-сайтов, 
которые больше напоминают электронные книги или журналы. Они позволяют 
посетителям лишь получать информацию. Однако в Интернете существуют 
меб-сайты, на которых организован удобный поиск информации, есть форум, 
чат и многое другое. Такие меб-сайты часто называют порталами. Сложно од- 
нозначно сказать, что такое меб-портал. Мы под этим термином подразумева- 
ем крупный меб-сайт с большим количеством информации по определенной 
тематике и предоставляющий посетителям много дополнительных возможно- 
стей по общению друг с другом, поиску информации и других. меб-порталы 
представляют собой специальные программы, которые выполняются на Web - 
сервере и формируют web -страницы, содержимое которых может быть взято 
из различных источников, например из баз данных или из других web-caiiTos. 
Существует большое количество систем построения Web -порталов, одной из 
которых является система XOOPS. 


Система построения web-noptasiop XOOPS может быть использована как удоб- 
ная основа для создания Web-caliToB любого размера. Для данной системы по- 
строения меб-порталов уже написано большое количество модулей, которые 
значительно расширяют функции системы. С помощью данной системы по- 
строения меб-порталов вы можете создать и небольшой ме-сайт-визитку, и се- 
тевой дневник, и Интернет-магазин, словом, все, что вам в голову придет. 
Для системы XOOPS существует много различной документации, в том числе и 
на русском языке. Многие модули и сама система переведены на русский язык. 
Кроме всего прочего, существует официальный мМеб-сайт системы XOOPS на 
русском языке, который расположен по адресу http://www.xoops2.ru. На этом 
миеб-сайте вы сможете загрузить необходимые модули и русификации к ним, 
почитать документацию и новости, а также задать интересующие вас вопросы на 
форуме и получить ответ. Система построения XOOPS разрабатывается боль: 
шим количеством людей по всему миру и ктому же бесплатна. 


Что такое XOOPS и как с этим работать 


Система построения меб-порталов XOOPS расшифровывается как eXtensible 
Object Oriented Portal System (Расширяемая Объектно-Ориентированная Пор- 
тальная Система). Система XOOPS - это программа, написанная на языке PHP, 
предназначенная для создания Web-noptanos. Работать с системой очень 
удобно и приятно, все настраивается и устанавливается практически одним 
щелчком мыши. Данная система позволяет персонализировать пользователей, 
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устанавливать новые темы, а благодаря поддержке модулей стираются границы 
использования этой системы. Начнем наше знакомство с установки системы 
XOOPS на web-cepsep. 


Установка системы XOOPS 2.x.x 


Система создания \Меб-порталов XOOPS устанавливается Ha Интернет-сервер 
с поддержкой РНР и баз данных. Рассмотрим технические требования систе- 
мы XOOPS: 


и Web-cepsep: Apache или IIS; 


и PHP 4.1.0 или более поздняя версия, рекомендуется PHP 4.1.1 или более 
поздняя версия; 


и Базы данных MySQL 3.23.xx. 


Для начала необходимо найти подходящего хостинг-провайдера. После того как 
вы заключите договор с хостинг-провайдером и зарегистрируете доменное имя 
для вашего ме-портала, вы сможете приступать к установке системы XOOPS. 


Хостинг-провайдер — это организация, которая размещает Ha 
своем сервере ваш иеБ-сайт. Как правило, размещение сайта 
происходит на платной основе, включающей взнос за регистра- 
цию доменного имени, а также ежемесячный (ежегодный) платеж. 


Прежде чем приступить к установке системы XOOPS, вам понадобятся следую- 
щие данные: 


Y Доменное имя вашего меб-портала, то есть адрес в Интернете; 
Y Адрес базы данных в Интернете, ее имя, логин и пароль. 


Данная информация окажется в вашем распоряжении после того, как хостинг- 
провайдер создаст ваш web-cepBep и базу данных. 


Кроме того, для копирования файлов Ha web-cepBep часто используют ЕТР- 
сервер. Поэтому, вполне возможно для копирования файлов Ha web-cepBep вам 
понадобятся логин и пароль к ЕТР-серверу. 


Архив с самой системой построения меб-порталов вы можете загрузить с мер- 
сайта Wwww.xoops2.ru. Данный web-caliT является официальным русскоязычным 
представительством данной системы. 


Теперь необходимо распаковать архив с системой и скопировать на Web-cepBep 
нужные файлы. 
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> Скопируйте во временную папку САХ загруженные из Интернета архивы 
xoops-2.2.3a-Final.zip и xoops_v22_ru.zip. 


Обратите внимание, что файл XOOps-2.2.3a-Final.zip — это заархивированный 
дистрибутив системы XOOPS, а архив хоор$_\22_ги.21р содержит файлы для 
перевода системы на русский язык. Архив XOOPS-2.2.3a-Final.zip содержит три 
папки: docs, extras и html. 


> Распакуйте архив xoops-2.2.3a-Final.zip, например в папку C:\X\XOOPS. 


Далее, чтобы система была на русском языке, необходимо установить русифи- 
кацию из архива XOOpS-2.2.3a-Final.zip. 


> Распакуйте архив xoops-2.2.3a-Final.zip в папку C:\X\XOOPS\htnl. 


Теперь все содержимое папки СА\АХ\ХООР$\В т! необходимо скопировать в кор- 
невую папку web-cepBepa. О том, как это лучше сделать, вам пояснит провайдер 
вашего web-cepBepa. 


> Скопируйте содержимое папки C:\X\XOOPS\html в корневую папку вашего 
web-cepBepa. 


Затем потребуется запустить обозреватель Интернета и ввести в поле ввода Ад- 
pec (Address) адрес вашего web-cepBepa. 


> Запустите обозреватель Интернета, например Internet Explorer. 


> В поле ввода Адрес (Address) введите адрес вашего web-noptana. Tak как 
вначале потребуется установить систему XOOPS, вы увидите в окне обозре- 
вателя Интернета первую страницу мастера установки (Рис. 5.1). 


| Адресь 2] http: //www.domain.com/install/index.php 


x00) - > 
INSTALLATION XOOPS VERSION 


Welcome to the Install Wizard for XOOPS 2,2 


Choose language to be used for the installation process 


english м | 
introduction >> 
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Рис. 5.1. Первая web-cmpanuya мастера установки 
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> В открывающемся списке Choose language to be used for the installation 
process (Выберите язык, который будет использоваться в процессе установ- 
ки) выберите строку russian (Русский). 


> Щелкните мышью на кнопке Next (Продолжить). Содержимое меб-страницы 
мастера установки изменится (Рис. 5.2). 


2 XOOPS Custom In 
Файл 


хор) > 
INSTALLATION “OOPS VERSION 


Добро пожаловать в мастер установки XOOPS 2,2 


Что это? 


XOOPS - это динамический ОО (Объектно-Ориентированный) основанный на открытом 
исходном коде скрипт портала, написанный на РНР. XOOPS поддерживает различные базы 
данных, XOOPS - это идеальный инструмент для создания небольших высоко-динамичных 
сообществ вэб-сайтов, внутренних порталов компании, корпоративных порталов, web- 
публикаторов и многого другого. 


XOOPS распространяется по условиям лицензии GNU General Public License (GPL) и 


свободен для использования и изменения. Это свободно распространяемое программное 
обеспечение при условии сохранения требований лицензии GPL, 


Технические требования 


e WWW сервер (Apache, IIS, Roxen, ит.д.) 
e PHP 4.1.0 или выше (рекомендуется 4.3.11 или выше) 
e База данных MySQL Database 3.23.ХХ 


Перед установкой 


Рис. 5.2. Вторая web-cmpanuya мастера установки 


Обратите внимание, что информация на меб-странице представлена теперь на 
русском языке. На данной меб-странице вы увидите информацию о системе 
XOOPS, технические требования и некоторую другую информацию. 


> Щелкните мышью на кнопке Продолжить (Next) для перехода к следующему 
шагу. Содержимое — \меБ-страницы мастера установки — изменится 
(Рис. 5.3). 


На экране появится информация о проверке прав доступа к файлам и каталогам. 


> Щелкните мышью на кнопке Продолжить (Next). Содержимое страницы 
мастера установки изменится (Рис. 5.4). 
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2} XOOPS Custom Installation 


Файл 


Правка Вид Избранное Сервис Справка 


XOOPS 


INSTALLATION 


Проверка прав доступа к файлам и каталогам. 


О Каталог uploads/ имеет права для записи. 
Каталог cache/ имеет права для записи. 

0 Каталог templates_c/ имеет права для записи. 
0 Файл mainfile.php имеет права для записи. 


Ошибок не обнаружено. 


основные установки »» Продолжить 


XDOPS INSTALLER 1.2 


Puc. 5.3. Третья web-cmpanuya мастера установки 


2 XOOPS Custom Installation 


Файл 


Oo» 


Правка Вид Избранное Сервис Справка 


Адрес; & http: //www.domain.com/install/index. php 


AQOORS 


INSTALLATION 


Основные настройки 


База данных пу$а! м | 


Выберите базу данных для использования 


Имя хоста 
Имя хоста сервера базы данных. Если Вы не уверены, то оставьте значение ‘localhost’, которое 
подходит в большинстве случаев, 


Пользователь базы данных 
Имя учетной записи пользователя на сервере базы данных 


Пароль базы данных 
Пароль учетной записи пользователя базь! данных 


Имя базы данных 
Имя базы данных на сервере, Мастер установки попытается создать базу данных если она не 
существует 


Префикс таблиц 

Этот префикс будет добавлен ко всем новым создаваемым таблицам для исключения 
конфликта имен в базе данных. Если Вы не уверены, то оставьте значение по умолчанию 
1 ’ 

xoops’. 


использовать устойчивое соединение? [Са [Нет 


F:/web-server/www2 


Aapec XOOPS http://www .domain.com 


По умолчанию 'HET'. Выберите 'НЕТ' если Вы He уверены, 


Абсолютный путь к XOOPS 
Абсолютный путь к корневой директории ХООР$ БЕЗ завершающего слеша 


Адрес корневой директории XOOPS БЕЗ завершающего слеша 


затеиализиизтиаизититиаиизииаииатиитиатитиииутиаии ати тии иена 


подтверждение >» | Продолжить 


XOOPS INSTALLER 1.2 | 


Рис. 5.4. Четвертая web-cmpanuya мастера установки 
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На данной странице потребуется указать адрес сервера баз данных, логин и па- 
роль к базе данных, а также имя базы данных. 


> В поле ввода Имя хоста (Database Hostname) введите адрес сервера баз дан- 
ных. Данный адрес вы должны получить у хостинг-провайдера. 


> В поле ввода Пользователь базы данных (Database username) введите ло- 
гин для доступа к базе данных. 


> В поле ввода Пароль базы данных (Database password) введите пароль для 
доступа к базе данных. 


> В поле ввода Имя базы данных (Database name) введите имя вашей базы 
данных. 


Остальные параметры установлены системой XOOPS автоматически, поэтому 
эти значения изменять не рекомендуется. 


> Если все в порядке, щелкните мышью на кнопке Продолжить (Next). 
Содержимое меБ-страницы изменится (Рис. 5.5). 


2} XOOPS Custom Installation 


Пожалуйста подтвердите введенные данные: 


Имя хоста localhost 


Пользователь базы данных 


Пароль базы данных 3 


использовать устойчивое соединение? 
Абсолютный путь к XOOPS 


Назад | << изменить установки сохранить установки >> Продолжить 


Рис. 5.5. Пятая web-cmpanuya мастера установки 


Вам будет предложено проверить все данные. 


> Если все правильно, щелкните мышью на кнопке Продолжить (Next). Co- 
держимое меб-страницы изменится (Рис. 5.6). 


> На данной странице отображается служебная информация о проделанных 
действиях и успешности их выполнения. 
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Адрес: | hetp:sfwww.domain, м php 


хооРь) 


Сохранение конфигурационных данных.. 


Файл ../mainfile.php был перезаписан как ../mainfile.dist.php. 

0 Константа XOOPS_ROOT_PATH записана в F:/web-server/www2, 
Константа ХООР$ _URL записана в Ир: {Ами .доглат.согп. 

0 Константа XOOPS_DB_TYPE записана в mysql. 

O константа XOOPS_DB_PREFIX записана в Jux25x. 

константа XOOPS_DB_HOST записана в localhost. 

Константа XOOPS_DB_USER записана в mydb_login. 

Константа XOOPS_DB_PASS записана в 123. 

Константа XOOPS_DB_NAME записана Е mydb. 

0 Константа XOOPS_DB_PCONNECT записана в 0. 

0 Константа XOOPS _GROUP_ADMIN записана в 1. 

0 Константа XOOPS_GROUP_USERS записана в 2. 

Константа XOOPS_GROUP_ANONYMOUS записана в 3. 

0 Константа XOOPS_CHECK_PATH записана в 1. 


Данные конфигурации были успешно записаны в файл mainfile.php. 


проверка путей и здресов >> | Продолжить 
XDOPS INSTALLER 1.2 | 
vi 


Рис. 5.6. Шестая web-cmpanuya мастера установки 


> Щелкните мышью на кнопке Продолжить (Next). Содержимое меб-страницы 
изменится (Рис. 5.7). 


XOOPS Custom Installation 
Файл Правка Вид Избранное Сервис Справка 


О === - ©- м вол ) поиск Se Избранное ФА медиа эВ: Se = wy | 


nrg ИЕ ИИА и ии ааа ey 


Адрес: &] http: и demain: choad iaiinidace. php ad Nepexoa 
Е a Al 


INSTALLATION XOOPS VERSION co 


ae NE кедр Saale. be ae 2 НИЙ, 


проверка путей и адресов 


0 Физический путь верен. 
0 Адрес введенный Вами - правильный URL-aapec. 


Путь на сервере к Вашей корневой XOOPS директории: F:/web-server/www2 
Адрес Вашей корневой XOOPS директории: http://www.domain.com 


Если перечисленные выше установки верны, нажмите кнопку для продолжения. 


подтверждение установок базы данных >> 
Назад | << начать все сначала Обновить Р у 
Продолжить 


—_—_ 


j XDOPS INSTALLER 1.2 i 


} 


Рис. 5.7. Седьмая web-cmpanuya мастера установки 
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На данной меб-странице также отображается информация об успешном завер- 
шении процесса проверки адресов. 


> Щелкните мышью на кнопке Продолжить (Next) для перехода к следующей 
странице мастера установки. Содержимое меб-страницы изменится (Рис. 5.8). 


3 XOOPS Custom Installation МЕ 
файл Правка Вид Избранное Сервис Справка ar 


х | Е Переход 


ai 


XOOPS VERSION => 


подтверждение установок базы данных 


Имя хоста localhost 
Пользователь базы данных mydb_login 
Имя базы данных mydb 
Префикс таблиц Jux25x 


Если перечисленные выше установки верны, нажмите кнопку для продолжения. 


i << начать весе сначала Обновить проверка базы данных >> Продолжить 


XOOPS INSTALLER 1.2 | 


У 


Рис. 5.8. Восьмая иер-страница мастера установки 


На восьмой странице мастера установки вам будет предложено подтвердить ус- 
тановки базы данных или, в случае возникновения ошибок, начать процесс на- 
стройки системы сначала. 


> Щелкните мышью на кнопке Продолжить (Next). Будет запущен процесс 
проверки работоспособности системы с данными установками, и появится 
информация об успешном завершении операции (Рис. 5.9). 


> Щелкните мышью на кнопке Продолжить (Next). В окне обозревателя поя- 
вится список созданных таблиц (Рис. 5.10). 
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ert #€) http: И, ния ле, one 


хо) > 
INSTRLLATION <ODPS VERSION 


проверка базы данных 


0 связь с сервером базы данных установлена. 
База данных mydb существует и подключается. 


Связь с базой данных установлена, 
Нажмите на кнопку для создания таблиц в базе данных. 


создание таблиц »» Продолжить 


ХООР5 INSTALLER 1.2 


Рис. 5.9. Девятая web-cmpanuya мастера установки 
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Гларес: & http: iiwww, ар ак php iv Переход 


0 таблица Jux25x _imgset Создана, | м 
0 Таблица Jux25x_imgset_tplset_link создана. : 
0 Таблица Jux25x_imgsetimg создана. 

0 Таблица Jux25x_modules создана. 

Таблица Jux25x ~newblocks создана, 

0 Таблица Jux25x_online создана, 

0 таблица Jux25x_ranks создана, 

0 таблица Jux25x_session создана. 

0 таблица Jux25x_smiles создана. 

0 Таблица Jux25x_tplset создана. 

0 таблица Jux25x_tplfile создана. 

0 Таблица Jux25x_tplsource создана. 

Таблица Jux25x_users создана. 

0 Таблица Jux25x_user_profile создана. 

0 Таблица Jux25x_user_profile_field создана. 

0 Таблица Jux25x_block_instance создана. 


Таблицы базы данных созданы, 


установки администратора >> Продолжить 


STALLER 1.2 


Рис. 5.10. Десятая web-cmpanuya мастера установки 


> Щелкните мышью на кнопке Продолжить (Next). Содержимое меб-страницы 
изменится (Рис. 5.11). 


Осваиваем бесплатный движок XOOPS 117 
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© Назад * @% - |x} @ & YP Поиск Зе Избранное а) Медиа & 


ААА SII НТИ weet tebeetrer 


Адрес: ®] http://www.domain.com{install/index.php 


Пожалуйста введите имя и пароль администратора Вашего сайта. 
Отображаемое имя администратора 


Имя администратора для входа 
Е-плай администратора 

Пароль администратора 
Подтверждение пароля 


запись данных >> Продолжить 


XOOPS INSTALLER 1.2 | м | 


Рис. 5.11, Одиннадцатая web-cmpanuya мастера установки 


> В поле ввода Отображаемое имя администратора (Displayed admin name) 
введите имя администратора, которое будет отображаться Ha меб-странице, 
например Администратор. 


> В поле ввода Имя администратора для входа (Admin name for enter) введи- 
те имя, которое потребуется ввести для входа в систему, например admin. 


> В поле ввода E-mail администратора (Admin e-mail) введите свой адрес 
электронной почты. 


> В поле ввода Пароль администратора (Admin password) введите пароль, 
который будет использоваться для входа в систему. 


> В поле ввода Подтверждение пароля (Confirm password) введите пароль еще 
раз для подтверждения безошибочного ввода. 


> Щелкните мышью на кнопке Продолжить (Next). На экране появится 
информация об успешной установке меню и модулей (Рис. 5.12). 
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curse ra name _ attr were to the ива, 
Config ldap surname attr added to the database. 
Config ldap _givenname attr added to the database. 
Config ldap port added to the database. 
Config ldap server added to the database. 
Config ldap base dn added to the database. 
Config ldap uid attr added to the database. 
Config ldap wid asdn added to the database. 
Config ldap manager dn added to the database. 
Config ldap manager pass added to the database. 
Config ldap version added to the database. 
Adding user profile fields... 
Field umode added to the database 
Field worder added to the database 
Field notify method added to the database 
Field notify mode added to the database 
Field user_regdate added to the database 
Field posts added to the database 
Field attachsig added to the database 
Field timezone offset added to the database 
Field user_mailok added to the database 
Field theme added to the database 
Field actkey added to the database 
Field last_login added to the database 


a) 


Модуль Система установлен успешно, 


Меню пользователя успешно создано 
Вход пользователей успешно создано 
Основное меню успешно создано 


Модули >» Продолжить 


XOOPS INSTALLER 1.2 


Рис. 5.12. Двенадцатая web-cmpanuya мастера установки 


> Щелкните мышью на кнопке Продолжить (Next) для перехода к следующему 
шагу. Содержимое меб-страницы изменится (Рис. 5.13). 


На данном этапе установки вам будет предложено установить два модуля: 


и’ Модуль Личные сообщения (Private Messaging) позволяет зарегистрирован- 
ным Ha Web-nopTasie пользователям обмениваться сообщениями; 


Y Модуль Расширенный профиль (User management) позволяет посетителям 
регистрироваться на портале. 


> Мы установим оба модуля. 
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Личные 0.1 Модуль обмена личными сообщениями между 
сообщения Е пользователями сайта 


Расширенный 0.1 Модуль управления полями расширенного 
‘ профиля пользователя 


Установка модулей »» Продолжить 


Рис. 5.13. Тринадцатая web-cmpanuya мастера установки 


> Установите флажок Личные сообщения (Private Messaging). 
> Установите флажок Расширенный профиль (User management). 


> Щелкните мышью на кнопке Продолжить (Next). Содержимое меб-страницы 
изменится (Рис. 5.14). 
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: @] http: {/www.domain. cormiinatallindex. she У | Переход 


Config avatar _minposts added to the database. bad 


Config allow chgmail added to the database. 
Config allowed groups added to the database. 
Adding user profile fields... 
Field user aim added to the database 
Field user icq added to the database 
Field user _from added to the database 
Field user sig added to the database 
Field user _viewemail added to the database 
Field user_yim added to the database 
Field user_msnm added to the database 
Field bio added to the database 
Field user intrest added to the database 
Field user_occ added to the database 
Field url added to the database 
Field newemail added to the database 


Модуль Расширенный профиль установлен успешно. 


завершение установки »» Продолжить 


Рис. 5.14. Четырнадцатая web-cmpanuya мастера установки 


> Щелкните мышью на кнопке Продолжить (Next) для завершения установки 
и перехода к последней странице мастера установки (Рис. 5.15). 
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xO0rs) 


Установка завершена 


Ваш сайт 

Нажмите ЗДЕСЬ чтобы увидеть домашнюю страницу Вашего сайта. 
Как пользоваться 

[еще нет] 

Поддержка 


Посетить XOOPS.org 


XOOPS WSTALLER 1.2 


Puc. 5.15. Завермающая web-cmpanuya мастера установки 


> Для перехода на главную Меб-страницу вашего сайта щелкните мышью на 
слове ЗДЕСЬ в строке Нажмите ЗДЕСЬ чтобы увидеть домашнюю стра- 


ницу Вашего сайта. На экране появится первая страница вашего web- 
портала (Рис. 5.16). 


2 XOOPS Site - Powered by You! 


powered by youl 


Monday, 27 May 2006 


а Вход 7 
пользователей 


Пользователь: 


——— 


| Пользователь: [`` 


ыыы 


Вы не ОИ ЕаНЕ Нажмите здесь. 


Забыли пароль? 


Регистрация 


& Основное меню | 
| 


Послать письмо активации еще раз 


Рис. 5.16. Web-cmpanuya для входа 
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Итак, мы установили систему построения \меб-порталов XOOPS на сервере. Те- 
перь необходимо удалить из корневой папки сервера KaTasior install. Удаление 
файлов и папок происходит таким же образом, как и загрузка файлов на сервер. 


> Удалите из корневой папки web-cepsBepa папку install. 


Система XOOPS успешно загружена на сервер, и настало время рассмотреть 
структуру папок и файлов на сервер, и об этом вы узнаете в следующем разделе. 


Структура файлов 


Благодаря хорошо продуманной структуре файлов и папок, система построения 
меб-порталов XOOPS легко расширяема. Мы рассмотрим структуру файлов систе- 
мы XOOPS в целом, а также структуру файлов модулей и тем оформления. Общее 
представление о структуре файлов в системе ХООР$ позволит вам более уверенно 
устанавливать модули и темы в системе и при этом не допускать ошибок. 


Напомним, что архив, в котором распространяется система ХООР$, содержит 
три папки, одна из которых называется html. Содержимое этой папки, загружен- 
ное Ha меб-сервер, состоит из следующих директорий: 


и’ Папка cache. В эту папку система XOOPS записывает различную служебную 
информацию, поэтому необходимо установить право записи в эту папку; 


Y Папка templates_c. Оформление системы XOOPS построено на основе шабло- 
нов, а для ускорения работы системы шаблоны оптимизируются и записываются 
в данную папку. Право записи в эту папку также необходимо установить; 


и В папке images содержатся рисунки, которые использует система XOOPS; 


/ Папка modules. В этой папке хранятся модули, расширяющие функциональ- 
ные возможности системы XOOPS; 


и В папке themes содержатся темы оформления системы XOOPS; 


и В папке language хранятся папки и файлы, определяющие поддерживаемые 
системой языки. 


Многие файлы системы представляют собой специальные сценарии, выполняя 
команды которых, на сервере генерируются меб-страницы. Большинство сцена- 
риев не запускается автоматически, а служит частью других сценариев. Сцена- 
рий, который генерирует главную меб-страницу портала, находится в корневой 
папке портала и носит название index.php. Таким образом, этот файл — главная 
страница портала, созданного на основе системы XOOPS. 


Мы рассмотрели структуру папок и файлов портала, основанного на системе 
XOOPS, и теперь познакомимся с основными принципами работы системы. 
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Принципы работы 


На этом уроке мы познакомимся с принципами работы с системой XOOPS. 
Мы рассмотрим выполнение наиболее важных настроек, которые позволят на- 
чать эксплуатирование портала, построенного на основе системы XOOPS. 


Ранее, устанавливая систему XOOPS на web-cepsep, мы вводили имя и пароль 
главного администратора портала. Дело в том, что в системе XOOPS организо- 
вано разграничение прав, то есть не все пользователи имеют право настраивать 
систему. Система XOOPS различает три группы пользователей: 


и’ Анонимные пользователи — посетители, которые не зарегистрированы на 
миеб-портале, поэтому имеют доступ лишь к разрешенным ресурсам и воз- 
можностям портала; 


Y Зарегистрированные пользователи — посетители, которые зарегистриро- 
ваны Ha web-noptasie, обладающие большими возможностями, чем аноним- 
ные пользователи. Каждый анонимный пользователь может зарегистриро- 
ваться на Web-noptae, чтобы стать зарегистрированным пользователем; 


и \еБ-мастера — посетители, которые участвуют в создании, редактировании, 
настройке и администрировании Web-noptasia, или определенных его частей и 
разделов. 


Пользователь, имеющий больше всех прав, имя и пароль которого мы вводили в 
процессе установки системы XOOPS, может настраивать систему XOOPS, дове- 
рять другим пользователям вести какие-либо разделы, создавать и удалять груп- 
пы пользователей, называется Главным администратором Web портала. Имя 
и пароль главного администратора нам понадобится далее. 


> Запустите программу — обозреватель Интернета, например Internet Explorer. 


> В поле ввода Адрес (Address) введите Интернет-адрес вашего портала. 
В окне обозревателя Интернета появится главная страница вашего сайта 
(Puc. 3. i). 
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Рис. 5.17. Главная страница портала 


В левой части главной страницы портала расположена группа элементов управ- 
ления Вход пользователей (Users login) (Рис. 5.18). 
а Вход 
пользователей 


Пользователь: 


Пароль: 


Забыли пароль? 


Регистрация 


Рис. 5.18. Группа элементов управления 
Вход пользователей (Users login) 


Чтобы войти на меб-портал, в указанной группе расположены поля ввода Поль- 
зователь (User) и Пароль (Password), в которых необходимо указать свои дан- 
ные — имя и пароль. Если вы забыли свое имя или пароль, но помните адрес 
электронной почты, который вы вводили при регистрации, вы можете воспользо- 
ваться ссылкой Забыли пароль? (Lost your Password?). Сведения о зарегистриро- 
ванном пользователе будут высланы на указанный адрес электронной почты. 
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Новым же пользователям для регистрации Ha меб-портале необходимо просле- 
довать по ссылке Регистрация (Not register). 


> Введите в поле ввода Пользователь (User) имя главного администратора 
портала, то есть имя, указанное вами при установке системы XOOPS. 


> Введите в поле ввода Пароль (Password) пароль главного администратора 
портала. 


> Щелкните мышью на кнопке Вход (Enter). В окне обозревателя Интернета 
появится главная страница пользователя (Рис. 5.19). 
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Рис. 5.19. Главная страница пользователя 


В левой части главной страницы пользователя расположена группа элементов 
управления Меню пользователя (User menu), предоставляющая доступ к сред- 
ствам администрирования. 


> Щелкните мышью на ссылке Администрирование (Administrate) в группе 
элементов управления Меню пользователя (User menu). В окне обозревате- 
ля Интернета появится страница администрирования (Рис. 5.20). 
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Рис. 5.20. Страница администрирования 


На странице администрирования под логотипом системы XOOPS расположена 
строка меню, в которой содержатся команды для настройки системы. 


> Щелкните мышью на строке Настройки. На экране появится меню. 


> Выберите из появившегося меню команду Система + Основные настройки 
(Preferences + System + Main preferences). В окне обозревателя Интернета поя- 
вится страница с основными настройками системы ХООР$ (Рис. 5.21). 


> На странице с основными настройками изображена таблица, в левой части 
которой расположены описания настроек, а в правой элементы управления. 
Описание функций элементов управления подробно рассмотрено, поэтому 
изучим лишь наиболее интересные из них. 
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Рис. 5.21. Страница администрирования — Основные настройки 


> В поле ввода Наименование сайта (Site name) введите название вашего 
портала. 


> В поле ввода Девиз Вашего сайта (Slogan for your site) введите девиз вашего 
сайта. 


> В поле ввода E-mail адрес администратора (Admin mail address) введите 
адрес электронной почты, по которому можно связаться с вами. 


На этой странице также можно изменить стиль оформления сайта. В состав сис- 


темы ХООР$ входят четыре стандартные темы оформления, и вы можете уста- 
НОВИТЬ ОДНУ ИЗ НИХ. 


> Выберите в открывающемся списке Тема оформления по умолчанию (De- 
fault theme) одну из тем оформления. 


Теперь следует отключить режим отладки системы, иначе пользователи смогут 
получить доступ к служебной информации. 


> В открывающемся списке Режим отладки (Debug mode) выберите значение 
Выключено (Off). 
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После того как все необходимые настройки произведены, необходимо сохранить 
изменения. 


> Щелкните мышью на кнопке Выполнить (Done). Изменения будут применены. 
Далее приступим к настройке ключевых слов и нижнего колонтитула. 


> В строке меню системы XOOPS выберите команду Настройки + Система + 
МЕТА-тэги и нижний колонтитул (Preferences System + META-tags and 
Footer). В окне обозревателя Интернета появится страница с настройками 
ключевых слов и нижнего колонтитула (Рис. 5.22). 
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Рис. 5.22. Страница администрирования — МЕТА-тэги и нижний колонтитул 


Информация, которая указывается на данной странице, используется поисковы- 
ми роботами, такими как Rambler или Yandex, чтобы пользователи по указан- 
ным ключевым словам могли находить ваш сайт посредством поисковых запро- 
сов. Чем точнее вы определите ключевые слова, тем больше вероятность того, 
что ваш портал будет первым в списке результатов поиска. 


> В поле ввода МЕТА-тэг ключевых слов (META-tag keywords) введите клю- 
чевые слова, которые определяют содержимое вашего портала, например 
Музыка, Фотографии, Общение. 


> В поле ввода Нижний колонтитул (Footer) введите значение, которое 
будет отображаться в нижней части каждой страницы вашего сайта. 
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> В поле ввода МЕТА-тэг Автора (META-tag author) введите свое имя. 

После того как вся нужная информация указана, изменения необходимо сохранить. 
> Щелкните мышью на кнопке Выполнить (Done). Изменения будут применены. 
Перейдем к настройке параметров цензуры слов. 


> В строке меню системы ХООР$ выберите команду Настройки + Система + 
Параметры цензуры слов (Preferences + System + Word Censoring Options). 


В окне обозревателя Интернета появится страница настройки цензуры слов 
(Рис. 5.23). 
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Рис. 5.23. Страница администрирования — Параметры цензуры слов 


Если требуется, чтобы на вашем портале нельзя было использовать ненорматив- 
ную лексику, выполните следующие действия. 


> Установите переключатель Разрешить цензуру нежелательных слов? (Еп- 
able censoring of unwanted words?) в положение Да (Yes). 


> Укажите в поле ввода Слова для цензуры (Words to censor) слова, употреб- 
ление которых ограничивается. 


> Укажите в поле ввода Плохие слова будут заменены Ha (Bad words will be 
replaced with) значение, на которое будут заменяться недопустимые слова. 
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> Щелкните мышью на кнопке Выполнить (Done), чтобы изменения вступили 
в силу. 


На следующем этапе необходимо произвести настройки почтовой службы, что- 
бы пользователи смогли получить доступ к электронной почте. 


> В строке меню системы XOOPS выберите команду Настройки + Система + 
Настройка почты (Preferences + System + Ма! Setup). В окне обозревателя 


Интернета появится страница с элементами управления настройками почты 
(Рис. 5.24). 
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Рис. 5.24. Страница администрирования — Настройка почты 


Правильно настроенные параметры электронной почты очень важны, иначе 
пользователя не смогут отсылать и получать письма. Например, когда осущест- 
вляется запрос при утере пароля. 


Самый простой вариант — это использование одного из почтовых серверов. 
В этом случае параметры почтовой службы портала настраиваются также, как 
и в почтовых клиентах, таких Kak MS Outlook Express. Рассмотрим наиболее 
важные параметры. 


> В открывающемся списке Метод доставки почты (Mail delivery method) 
укажите значение SMTP, согласно параметрам выбранного почтового сервера. 


5 - 6268 
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> Укажите в поле ввода SMTP-cepBep (SMTP-server) адрес вашего почтового 
сервера, например mysite.ru. 


> Укажите в поле ввода ЗМТР-пользователь (SMTP-user) имя пользователя, 
под которым вы зарегистрированы на почтовом сервере. 


> Укажите в поле ввода ЗМТР-пароль (SMTP-password) пароль пользователя 
для доступа к почтовому ящику. 


> Щелкните мышью на кнопке Выполнить (Done), чтобы изменения вступили 
в силу. 


Таким образом, мы настроили основные параметры, требуемые для работы пор- 
тала. С остальными настройками разобраться не составит труда, так как каждо- 
му параметру соответствует подробное описание. А благодаря использованию 
русской версии системы XOOPS, создание своего сайта пройдет быстро и без 
особых усилий. 


Заключение 


В этой главе мы познакомились с системой построения порталов XOOPS и pac- 
смотрели приемы установки системы Ha \Меб-сервер. Кроме того, подробно опи- 
саны некоторые настройки, позволяющие начать работу с системой. Как вы мог- 
ли убедиться, без дополнительных модулей система ХООР$ имеет не так много 
возможностей, поэтому в следующей главе мы познакомимся с модулями, их 
установкой и настройкой. 


Надо отметить, что система построения порталов ХООР$ достаточно популярна 
и вы сможете найти в Интернете большое количество информации, которая по- 
может вам быстрее и лучше разобраться в данной системе. В случае возникно- 
вения вопросов по системе XOOPS, не рассмотренных в рамках данной книги, 
вы можете посетить официальные русскоязычные сайты WWW.XOOps.ru и 
www.xoopsz2.ru. 


ГЛАВА 6 

Запускаем лвижок, олним приемом 
строим web-noptaa и бесплатно 
помешаем его в Интернет 


Стандартной конфигурации движка XOOPS, которую мы установили и настрои- 
ли в предыдущей главе, хватит далеко не всем. Ведь по умолчанию, пользовате- 
ли нашего портала могут лишь посылать друг другу сообщения и редактировать 
свой профиль. Да и вариантов оформления не так много: лишь четыре стандарт- 
ные темы. Вот поэтому в данной главе мы научимся оформлять Web-nopTa на 
основе движка ХООР$. Также мы рассмотрим популярные дополнительные мо- 
дули, которые существенно расширят функционал движка, тем самым мы смо- 
жем обеспечить своих пользователей всем необходимым для комфортной и пло- 
дотворной работы с нашим порталом. 


Что такое темы и для чего они нужны 


Оформление многих меБ-порталов изменяется довольно часто. Поэтому для лю- 
бой системы построения \меб-порталов важно иметь удобный способ изменения 
оформления. Этот способ должен быть простым и доступным даже для нович- 
ков. Оформление системы XOOPS построено на шаблонах, и в результате, для 
изменения дизайна нужно лишь настроить шаблоны, даже не касаясь кода сис- 
темы. Наборы шаблонов, стилей, рисунков и других элементов называются те- 
мой оформления. В движке ХООР$ под темы оформления выделена папка 
/themes. В папке /themes может храниться несколько тем оформления, а выбор 
подходящей темы происходит через интерфейс администрирования. Файлы те- 
мы оформления расположены в папке, название которой совпадает с названием 
темы. Структура файлов темы оформления, также как и структура файлов движ- 
ка в целом, строго определена, что способствует простоте как создания темы 
оформления, так и ее установки. 


В Интернете существует большое количество уже готовых тем оформления, и 
каждый сможет выбрать вариант оформления себе по душе. Хотя в дальнейшем, 
если вам будет необходимо, вы всегда сможете освоить процесс создания своих 
собственных тем оформления. 


Для более детального рассмотрения специфики построения порталов вы можете 
посетить официальный русскоязычный \меб-сайт движка ХООРЗ - 
http://www.xoops2.ru/, а также, если вы владеете английским языком, англоя- 
зычный — \Меб-сайт движка  ХООР$, расположенный по — адресу 
http://(www.xoops.org/. Кроме массы полезной информации, на данных web- 
сайтах есть разделы с готовыми темами оформления, которые вы можете загру- 
зить и использовать на своем портале. 


5* 
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Далее мы рассмотрим процесс загрузки и установки готовой темы оформления 
на свой меб-портал. 


Загрузка и установка темы оформления 


Мы загрузим и установим на свой \меб-портал тему оформления. Темы оформ- 
ления распространяются в Интернете в виде архива, чаще всего имеющего рас- 
ширение .zip. Подобные архивы содержат папку с файлами темы оформления, 
которую необходимо загрузить на меб-сервер в директорию /themes. Таким об- 
разом алгоритм действий предельно прост. 


> Загрузите тему оформления к себе на компьютер. У вас появится архив, скорее 
всего, с расширением .21р. 


> Разархивируйте в любую временную папку архив с темой оформления, напри- 
мер в папку с:Метр. Во временной папке появится папка с темой оформления. 


> Скопируйте папку на меб-сервер портала в директорию /themes, таким же обра- 
30M, как вы скопировали файлы движка XOOPS на меб-сервер ранее. 


Теперь необходимо выбрать новую тему оформления. Но прежде вам необходи- 
мо зайти на свой меб-портал как Администратор и перейти на страницу адми- 
нистрирования. А затем, на странице администрирования, следует выполнить 
следующее действие. 


> Выберите команду меню Настройки + Система + Основные настройки (Prefer- 
ences System + Main preferences). Загрузится уже знакомая вам страница с ос- 
новными настройками системы XOOPS. 


На данной странице в открывающихся списках Тема оформления по умолчанию 
(Default theme) и Выбираемые темы оформления (Chosen theme) появится назва- 
ние установленной темы. Чтобы оформление вашего меб-портала было в соответ- 
ствии с новой темой оформления, выполните следующий практический шаг. 


> Выберите в открывающемся списке Тема оформления по умолчанию (Default 
theme) значение с названием новой темы оформления. 


Рекомендуется в целях безопасности в качестве оформления раздела админист- 
рирования выбрать тему default (По умолчанию). Это позволит разделу админи- 
стрирования быть в рабочем состоянии в случае непредвиденных сбоев. 


> Выберите в открывающемся списке Тема оформления раздела 
администрирования (Admin theme) значение default (По умолчанию). 


> Щелкните мышью на кнопке Выполнить (Done), чтобы внесенные изменения 
вступили в силу. 


Просмотрим внесенные изменения и перейдем на домашнюю МеБ-страницу. 
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> Выберите команду меню Действия + Перейти на домашнюю страницу 
(Action ¢ Go to home page). Загрузится домашняя страница пользователя 
Администратор с новым вариантом оформле 
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Puc. 6.1. Новая тема оформления 


Таким образом вы можете выбирать различные варианты оформления для сво- 
его меб-портала. Все, что необходимо, это загрузить готовые темы оформления 
из Интернета и опробовать их на своем портале. Рекомендуется оставить только 
те темы, которые вам понравятся, чтобы избежать путаницы в дальнейшем, а 
потом уже периодически менять их. Следует в первую очередь подумать об 
удобстве пользователей портала и стараться избегать тем оформления с плохо 
читающимся текстом или раздражающей цветовой гаммы. 


Далее мы рассмотрим некоторые дополнительные модули для движка XOOPS, 
так как для решения всех поставленных практических задач по созданию порта- 
ла, стандартной конфигурации движка скорее всего недостаточно. 


Работаем с модулями 


В данном разделе мы познакомимся с наиболее часто используемыми модулями. 
Нами будут рассмотрены и опробованы модули для создания новостей, создания 
и функционирования форумов, а также модуль для создания статей. Стоит 
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отметить, 4TO для движка XOOPS существует очень большое количество моду- 
лей, которые помогут быстро и легко решить самые разнообразные задачи, такие 
как создание галерей, чатов, руководств или разделов объявлений, оформление 
адресных книг или систем помощи, и многое другое. Количество поклонников 
движка XOOPS растет, а вместе с ними растет и число модулей. 


Также, как и под темы оформления, для модулей в движке ХООР$ выделена специ- 
альная папка /modules, в которую и следует копировать необходимые модули. 


А теперь перейдем к более подробному рассмотрению процессов установки, на- 
стройки и использования модуля, предназначенного для ведения новостей. 


Молуль NEWS у 1.3 


Любой развивающийся мМеб-портал должен каким-либо образом информировать 
своих пользователей об изменениях и новинках, о планах на будущее, или про- 
сто сообщать своим пользователям новости по теме портала. Таким образом, 
часто возникает необходимо создать свой раздел новостей. Мы рассмотрим воз- 
можности специально написанного для ведения новостей модуля. Данный мо- 
дуль и русификатор для него можно загрузить с web-caiita системы XOOPS, 
расположенного по адресу http://www.xoops2.ru/. 


В нашем примере мы загрузили с Интернета два архива: 


Y Файл XOOPS2_mod_news_1.3.zip, который содержит папку news с файлами 
модуля; 


¥Y Файл news_1.3_ru.zip, содержащий файлы русификации модуля новостей, 
которые также расположены в папке news. 


> Разархивируйте содержимое архива XOOPS2_mod_news_1.3.zip в какую-либо 
временную папку, например в папку c:\temp, а затем в эту же временную папку 
разархивируйте и архив news_1.3_ru.zip. 


> Скопируйте папку news на меб-сервер в папку /modules, таким же образом, как 
копировали файлы движка XOOPS на web-ceppepe ранее. 


Теперь необходимо зайти на портал как Администратор и перейти на страницу 
администрирования. 


> Выберите команду меню Модули + Администрирование (Modules + Adminis- 
trate) страницы администрирования. Загрузится страница Администрирование 
модулей (Modules administrate) (Рис. 6.2). 
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Puc. 6.2. Страница Администрирование модулей (Modules administrate) 


В таблице на данной странице отображены модули, которые уже установлены в 
движке ХООР$. Ниже расположена вторая таблица, в которой отображаются 
модули, которые доступны для установки. Установим модуль Новости (News). 


> Щелкните мышью на рисунке |5” Установка (Install), расположенном в 
колонке Действия (Action) модуля Новости (News). Загрузится страница, 
содержащая элементы управления для изменения некоторых параметров 
доступа модуля (Рис. 6.3). 
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Рис. 6.3. Страница для изменения параметров прав устанавливаемого модуля 


На данной странице необходимо выбрать группы пользователей, которые будут 
иметь права администрирования данного модуля. Также требуется выбрать 
группы пользователей, которые будут иметь права доступа к данному модулю. 
Для администрирования мы выберем одну группу Web-Macteppi, а правами 
доступа наделим все имеющиеся три группы пользователей: Анонимные поль- 
зователи, Зарегистрированные пользователи и Web-Macteppi. 


> Выберите в списке Выберите группы с правами администрирования (Choose 
group for administrate) значение \Меь-Мастеры. 


> Выберите в списке Выберите группы с правами доступа (Choose group for ac- 
cess) все значения списка. 


> Нажмите кнопку Установка (Install), чтобы продолжить установку модуля. За- 
грузится страница с информацией о процессе установки (Рис. 6.4). 
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SQL file found at Е: /web-server /we2 /modules /news /541 /mysql .sql. 
Creating tables... 
Table Jux25x stories created. 
Table Jux25x_ stories files created. 
Table Jux25x topics created. 
Data inserted to table Jux25x topics. 
Table Jux25x_stories votedata created. 
Module data inserted successfully. Module ID: 4 
Updating templates... 
Template news item.html inserted to the database. 
Template news item.html recompiled. 
Template news_archive.html inserted to the database. 
Template news_archive.html recompiled. 
Template news article.html inserted to the database. 
Template news article.html recompiled. 
Template news_index.html inserted to the database. 
Template news index.html recompiled. 
Template news by topic.html inserted to the database. 
Template news by topic.html recompiled. 
Template news by this author.html inserted to the database. 


Puc. 6.4. Установка модуля 


Ha появившейся странице отображен список всех выполненных действий и резуль- 
тат выполнения операций. Кроме того, в нижней части страницы расположена 
ссылка, по которой можно перейти на страницу Администрирование модулей. 


> Щелкните мышью на ссылке Назад на страницу администрирования моду- 
лей (Back to Module administrate page), расположенной в нижней части страни- 
цы. Загрузится страница администрирования модулей с новым списком установ- 
ленных модулей (Рис. 6.5). 


Теперь модуль новостей установлен и готов к работе. Стоит обратить ваше внима- 
ние на то, что точно таким же образом устанавливаются и любые другие модули. 
Рассмотрим основные приемы работы с установленным модулем и для начала соз- 
дадим какой-нибудь раздел новостей, например раздел Новости сайта. 
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Рис. 6.5. Страница администрирования модулей 


> Выберите команду меню Модули + Новости + Менеджер разделов (Модше$ + 


News @ Topics Manager). Загрузится страница для управления разделами ново- 
стей (Рис. 6.6). 


В начале данной страницы размещена таблица со списком всех разделов. Создан- 
ные разделы вы можете отредактировать или удалить. А чтобы добавить новый 
раздел, следует заполнить форму Добавление статьи (Add а topic), которая поме- 
щена ниже, под таблицей со списком разделов новостей. 
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Рис. 6.6. Страница Менеджер разделов (Topics Manager) 
> Введите в поле ввода Название раздела (Topic name) название, которое будет 
отражать смысл тем новостей данного раздела, например Новости сайта. 


> Введите в поле ввода Описание раздела (Topic description) краткое описание 
раздела, чтобы пользователи сразу могли понять, какие новости размещены в 
данном разделе. 


Остальные параметры мы изменять не будем. 


> Нажмите кнопку Добавить (Add). Новый раздел, в нашем случае с именем Но- 
вости сайта, будет добавлен. 


После того как новый раздел создан, необходимо определить для групп пользо- 
вателей права на одобрение, отправку и просмотр новостей данного раздела. 


> Выберите команду меню Модули + Новости + Права (Modules + News  Permis- 
sions). Загрузится страница для определения прав пользователей (Рис. 6.7). 
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Рис. 6.7. Страница для определения прав для групп пользователей 


В начале данной страницы помещен открывающейся список, в котором содер- 
жатся доступные значения прав. Ниже находится таблица со списком групп 
пользователей и разделов новостей. Устанавливая флажки необходимых разде- 
лов в строках групп пользователей, вы можете определить права для каждой 
группы и для каждого раздела. 


В качестве примера установим права на отправку новостей группе пользовате- 
лей Web-Mactepbi. 


> Выберите в открывающемся списке, расположенном в начале страницы, значе- 
ние Права на отправку (Submit Permission). Ниже появится таблица Права на 
отправку (Submit Permission), содержащая элементы управления параметрами 
выбранных прав. 


> Установите флажок Новости сайта в строке \Меь-Мастеры. 


> Нажмите кнопку Отправить (Submit), чтобы изменения вступили в силу. 
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Таким образом, пользователи, принадлежащие к группе \ММеь-Мастеры, смогут 
добавлять новости в раздел Новости сайта. Точно также следует разрешить 
права на одобрение и просмотр остальным группам, чтобы все пользователи 
могли одобрять или просматривать новости раздела. 


После того как с настройками прав мы разобрались, попробуем добавить первую 
НОВОСТЬ. 


> Выберите команду Модули + Новости + Менеджер статей (Modules + News + 
Post/Edit News). Загрузится страница для управления новостями (Рис. 6.8). 
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Puc. 6.8. Страница для управления новостями 


В начале данной страницы находится таблица со списком последних десяти но- 
востей, в данный момент пустым, так как ни одной новости еще не было созда- 
но. Новости вы можете редактировать или удалять, указывая в поле ввода текста 
Номер статьи (Story ID) номер статьи и выбирая из расположенного правее от- 
крывающегося списка действия. 


Ниже находится форма Создание новости (Submit News) для добавления ново- 
сти. Все, что необходимо сделать для создания новости, это заполнить поля фор- 
мы и щелкнуть мышью на кнопке Отправить (Submit). 
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Мы рассмотрели принципы работы с модулем новостей. Кроме Toro, данный 
модуль позволяет выполнять следующие операции над блоком новостей: 


и’ Очистка новостей (Prune News) — удаление старых новостей; 
и Экспорт (News Export) — сохранение выбранных новостей в виде ХМЁ-файла; 


и Бюллетень (Newsletter) — сохранение выбранных новостей в виде текстового 
файла; 


и’ Статистика (Statistics) — вывод подробной статистики по разделам, новостям 
и авторам. 


Данный модуль прост в использовании, имеет большое количество возможно- 
стей, которые легко позволят вам создать на своем портале раздел новостей. 


Часто на многих \меб-порталах на главной странице отображаются новости. 
Мы тоже можем выбрать в качестве начальной страницы модуль новостей. 


> Выберите команду меню Настройки + Система + Основные настройки (Prefer- 
ences System + Main preferences). Загрузится уже знакомая вам страница с ос- 
новными настройками системы XOOPS. 


> Выберите в открывающемся списке Модуль для вашей домашней страницы 
(Module for Home page) значение Новости (News). 


> Нажмите кнопку Выполнить (Done), чтобы изменения вступили в силу. 


Теперь каждый пользователь, набравший в строке адреса своего обозревателя 
Интернета адрес вашего портала, увидит главную страницу с новостями. 


А теперь мы рассмотрим модуль для создания на портале форумов. 


Молуль NEW BB у. 2.xx 


На сегодняшний день лишь немногие меб-порталы обходятся без форума. Do- 
рум представляет собой средство общения, предназначенное для обсуждения 
каких-либо проблем посетителями портала. Каждый пользователь может создать 
собственную тему для обсуждения или принять участие в обсуждении какой- 
либо чужой темы. Форумы способствуют образованию единого сообщества пор- 
тала. Таким образом, вы можете получить постоянных пользователей, а также 
повысить рейтинг вашего портала. 


Оснастить портал, построенный на основе движка XOOPS, форумом не соста- 
вит труда. В данном разделе мы рассмотрим приемы добавления, настройки и 
работы с форумом. 


Одним из наиболее популярных модулей для создания форума в движке ХООР$ 
является модуль NEW ВВ. Загрузить данный модуль, а также русификатор к не- 
му можно с Меб-сайта WWW.XxOOpS2.ru. 
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> Загрузите из Интернета архивы с модулем и русификатором. 
> Установите на портал данный модуль, как описывалось ранее. 


После завершения установки приступим к освоению принципов администриро- 
вания форума. 


> Выберите команду меню Модули + New ВВ 2.0 + Главная (Modules + New 
ВВ 2.0 + Index). Загрузится страница New ВВ 2.0 Администрирование модуля: 
Главная (New ВВ 2.0 Module Admin: Index) (Рис. 6.9). 
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Рис. 6.9. Страница New ВВ 2.0 Администрирование модуля: 
Главная (New ВВ 2.0 Module Admin: Index) 


На данной странице содержится различная информация о модуле и его функ- 
ционировании. Для правильной работы форума необходимо создать пути для 
сохранения вложений и для миниатюр прикрепленных изображений. В группе 
Настройка модуля (Module preferences) расположены ссылки Создать (Create), 
с помощью которых создаются пути согласно их описаниям. 


Теперь создадим категорию, которая будет отражать смысл всех расположенных 
в ней форумов. 
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> Выберите команду меню Модули + New ВВ 2.0 + Категории (Modules + 
New ВВ 2.0 Categories). Загрузится страница New ВВ 2.0 Администриро- 
вание модуля: Создать категорию (New ВВ 2.0 Module Admin: Create а 
New Category) (Рис. 6.10). 
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Рис. 6.10. Страница New ВВ 2.0 Администрирование модуля: 
Создать категорию( №? ВВ 2.0 Module Admin: Create a New Category) 


На появившейся странице расположена форма, заполнив которую, вы создадите 
новую категорию. Также потребуется выбрать группу пользователей, которые 
будут иметь доступ к создаваемой категории. 


> В строке Уровни доступа (Access Level) установите флажки перед теми группа- 
ми, которые будут иметь доступ к данной категории. 


> Введите в поле ввода Вес категории (Set category position) число, отражающее 
значимость данной категории, например 1. 


> Введите в поле ввода Категория (Category) название данной категории, напри- 
мер Основная категория. 


> Введите в поле ввода Описание категории (Category description) описание 
категории. 
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В поле ввода Описание категории (Category description) можно указать описа- 
ние категории, например кратко перечислить темы, обсуждаемые на форуме. 
Также вы можете использовать рисунки, гиперссылки и текст с разным шриф- 
том и цветом. 


> Установите переключатель Показать описание? (Show Description?) в положе- 
ние Да (Yes), чтобы отобразить описание. 


> Выберите в открывающемся списке Статус (Status) значение Активный (Active), 
чтобы категория была включена. 


Категория может быть активна, то есть включена, либо наоборот — неактивна, 
выключена. 


> Нажмите кнопку Отправить (Submit). Категория будет создана. 


После того как вы создали категорию, можно приступить к созданию форумов. 
Форумы будут отражать смысл обсуждаемых тем. 


> Выберите команду меню Модули + New BB 2.0 + Форумы (Modules + New 
ВВ 2.0 + Forums). Загрузится страница New BB 2.0 Администрирование моду- 
ля: Форумы (New ВВ 2.0 Module Admin: Forums) (Рис. 6.11). 
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Рис. 6.11. Страница New ВВ 2.0 Администрирование модуля: 
Форумы (New ВВ 2.0 Module Admin: Forums) 
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На данной странице отображена таблица со списком всех категорий. В каждой 
категории можно создать один или несколько форумов. Создадим для примера 
форум с именем Общий форум. 


> Щелкните мышью на кнопке в выбранной категории. Загрузится 
страница Мем ВВ 2.0 Администрирование модуля: Создание нового форума 


(New ВВ 2.0 Module Admin: Create a New Forum) (Рис. 6.12). 
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Рис. 6.12. Страница New ВВ 2.0 Администрирование модуля: 
Создание нового форума (New ВВ 2.0 ModuleAdmin: Create a New Forum) 


На появившейся \Меб-странице находится форма, заполнив поля которой, вы CO3- 
дадите форум. Также вам предстоит определить права групп пользователей, 
разрешив одним и создавать, и читать обсуждения, а другим лишь читать. 


> Установите флажки Уровни доступа (Access Level) перед теми группами, кото- 
рые будут иметь доступ к создаваемому форуму. 


> Введите в поле ввода Вес форума (Set forum position) число, отражающее зна- 
чимость данного форума, например 1. 


> Введите в поле ввода Название форума (Forum name) название форума, напри- 
мер Общий форум. 
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В поле ввода Описание форума (Forum description) вы можете указать описание 
данного форума — его краткую характеристику. 


> Выберите в открывающемся списке Категория (Category) значение категории, в 
которой будет размещен создаваемый форум. 


> Выберите в открывающемся списке Статус (Status) значение Активный (Active), 
чтобы данный форум был активирован. 


Остальные параметры мы изменять не будем. 
> Нажмите кнопку Создать форум (Create forum). Новый форум будет создан. 


В Интернете существует огромное количество порталов с форумами, и вы, BO3- 
можно, уже видели их, а может, даже создавали свои темы. Поэтому разобраться 
с возможностями модуля New ВВ не составит труда. Кроме того, в Интернете вы 
сможете найти большое количество информации, которая позволит легко разо- 
браться с данным модулем. 


А теперь пришло время разобраться с модулем для создания раздела статей 
на портале. 


Модуль Articles 


Для создания раздела статей на портале для движка ХООР$ существует большое 
количество модулей. Мы рассмотрим модуль Articles v 1.0. Архивы с модулем и 
русификатором модуля можно загрузить с меб-сайта WWW.XOOpSs2.ru. 


> Загрузите из Интернета архив с модулем и архив с русификацией. 
> Распакуйте архивы и установите модуль в систему, как описывалось ранее. 
Работа с модулем Articles напоминает работу с модулем новостей. 


> Выберите команду меню Модули + Статьи + Главная (Modules + Articles + Ш- 
dex). В окне обозревателя Интернета появится страница Главная: Front Раде 
(Index: Front Page) (Рис. 6.13). 


На данной странице отображена статистика работы модуля Articles. В дальней- 
шем статьи смогут писать посетители вашего портала, и вам необходимо будет 
лишь одобрять, удалять или редактировать их. 


Перейдем непосредственно к процессу создания статьи. Это позволит лучше по- 
нять приемы работы с модулем Articles. 


Стоит также отметить, что темы статей всегда разбиты на категории. И каждая ста- 
тья принадлежит какой-либо категории. Поэтому прежде чем создавать статьи, не- 
обходимо создать категории. 
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Рис. 6.13. Страница Главная: Front Page (Index: Front Page) 


> Выберите команду меню Модули + Статьи + Добавить категорию (Modules + 


Articles + Add category). Загрузится страница Главная: Добавить категорию 
(Index: Add category) (Рис. 6.14). 
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Puc. 6.14. Добавляем категорию 
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На странице Главная: Добавить категорию (Index: Add category) расположена 
форма, поля которой необходимо заполнить, чтобы создать категорию. 


> Введите в поле ввода текста Заголовок (Title) название, которое будет отражать 
смысл данной категории. 


> Введите в поле ввода Вес (Order) число, которое будет отражать значимость 
данной категории. Чем больше число, тем значимее данная категория. 


Стоит отметить, что категория и связанные с ней статьи могут быть скрыты или, 
наоборот, доступны для просмотра. 


> Убедитесь, что флажок Показать (Display) установлен. Данная категория и свя- 
занные с ней статьи будут отображены на портале. 


В поле ввода текста Описание (Description) необходимо указать описание дан- 
ной категории. В данном описании могут быть использованы иллюстрации, ги- 
перссылки, а также текст с разным шрифтом или цветом. 


> Введите в поле ввода текста Описание (Description) текст, дающий представле- 
ние о содержимом категории. 


> Нажмите кнопку Сохранить (Save). Категория будет создана. 
Также вы можете отредактировать любую из созданных ранее категорий. 


> Выберите команду меню Модули + Статьи + Ред./удал. категорию (Modules + 
Articles + Edit/Remove category). Загрузится страница для выбора необходимой 
категории (Рис. 6.15). 
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| Статьи, version 1.0 
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Рис. 6.15. Редактирование категорий 


На данной странице есть таблица со списком категорий. 
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> Щелкните мышью на кнопке LAI в строке с необходимой категорией. Загрузится 
страница с формой для внесения исправлений в категорию. 


Если же вам потребуется удалить категорию, то нужно щелкнуть мышью на 


кнопке ||, в строке с необходимой категорией, после чего выбранная категория 
будет удалена. 


Перейдем к созданию статьи и размещению ее в категории. 


> Выберите команду меню Модули + Статьи + Добавить статью (Modules + Arti- 
cles + АДА articles). Загрузится страница Главная: Добавить статью (Index: Add 
articles) (Рис. 6.16). 
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Рис. 6.16. Добавление статьи 
На данной странице расположена форма, на которой необходимо заполнить поля 


для создания статьи. 


> Введите в поле ввода текста Заголовок (Title) заголовок статьи, например Пер- 
вая статья. 


> Выберите в открывающемся списке Категория (Category) значение категории, в 
которую будет помещена статья. 


> Введите в поле ввода Bec (Order) число, соответствующее значимости данной 
статьи. Чем больше число, тем значимей статья. 


> Убедитесь, что флажок Показать (Display) установлен, чтобы данная статья бы- 
ла опубликована. 
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Запускаем движок, одним приемом строим web-noptan 151 


Также вы можете указать описание статьи, то есть краткое введение или поясне- 
ние содержания статьи, чтобы пользователи могли сразу понять содержимое 
статьи. В данном описании могут быть использованы рисунки, гиперссылки, а 
также текст с разнообразным шрифтом и цветом. 


> Введите в поле ввода Описание (Description) описание статьи. 


Текст статьи необходимо вводить в поле ввода Текст статьи (Article text). 
Вы также можете вставлять рисунки, гиперссылки и текст с разнообразным 
шрифтом и цветом. 


> Введите в поле ввода Текст статьи (Article {ех@ текст статьи. 


> Нажмите кнопку Сохранить (Save). Статья будет создана и размещена в вы- 
бранной категории. 


Также, как и категории, вы можете удалять и редактировать статьи. 


> Выберите команду меню Модули + Статьи + Ред./удал. статью (Modules + 
Articles + Edit/Remove category). Загрузится страница, на которой вы сможете 
выбрать необходимую статью для правки или удаления. 


Таким образом, модуль Articles позволяет без усилий создать на портале раздел 
для статей. Вы легко сможете создавать, удалять и редактировать как категории, 
так и статьи. 


Заключение 


В данной главе мы рассмотрели основные приемы работы с движком XOOPS. 
Теперь вы уже имеете представление о простых приемах создания web- 
порталов, о принципах их администрирования и использования. Более подроб- 
ную информацию вы найдете на многочисленных сайтах, посвященных движку 
XOOPS. Стоит отметить, что в Интернете есть большое количество информации 
о движке XOOPS, в том числе и на русском языке. Советуем посетить офици- 
альные русскоязычные сайты движка XOOPS — www.xoops.ru и WWW.xoopsz2.ru. 
На данных Меб-сайтах вы сможете легко найти большое количество информа- 
ции, тем оформления и модулей, а также ссылок на другие сайты и ресурсы. 


На этом наше знакомство с приемами работы в программе Macromedia Dream- 
weaver, а также способами создания страниц и порталов для размещения в Ин- 
тернете завершено. Желаем вам, дорогой читатель, успехов в создании своего 
первого ресурса сети! 
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145 | Adobe Photoshop, Adobe Illustrator, Adobe InDesign, Adobe GoLive, Adobe Acrobat 
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091 | Adobe® Photoshop® CS. + СО-ДИСК. (576 с.) 
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Adobe® InDesign® С$2. Верстка книг, газет, журналов. + СО-ДИСК. 
(432 с.) 


155 | AutoCAD 2006. (576 с.) 447 


Adobe® GoLive® С$2. Создание ММеь-сайтов: дизайн, анимация, 


графика, баннеры. + СО-ДИСК. (384 с.) 
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204 Adobe® Audition® 2.0. Профессиональная обработка звука. 307 
+ СО-ДИСК. (288 с.) 
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215 Adobe’ Encore’ DVD 2.0. Создание профессиональных 347 


О\0-видеодисков. + РУО-ДИСК. (240 с.) 


O | Цифровая Фотография от Adobe. + СО-ДИСК. (304 с.) 
1 | Домашний Видеомонтаж от Adobe. + РУО-ДИСК. (224 с.) 


223 Adobe After Effects 7.0. Видеомонтаж, спецэффекты, создание 447 
видеокомпозиций. + СО-ДИСК. (400 с.) 


211 | Заз МАХ®. Профессиональная анимация. + РУО-ДИСК. (368 с.) 
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Серия «В ЕЛИ БУХГАЛТЕРА» 


1С:Бухгалтерия 8.0. Учет торговых операций. (208 с.) _ 


1С:Бухгалтерия 8.0. Учет производственной деятельности 
Версия 8.0. СН тет диареи производственных запасов. (192 с.) 


1 |179. 1С: | 1С:Бухгалтерия 8.0. Учет операций с денежными средствами. (192 с.) | 8.0. Учет операций с денежными средствами. (192 с.) 1 |172. 


1С:Бухгалтерия 8.0. Учет основных средств и нематериальных 
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1С: Ая 7. 7 renee посторонней помощи. . (528 в. 
Цифровая фотография без посторонней помощи. (272 с.) 
Adobe Photoshop CS2 в примерах. Русская версия. (368 с.) 
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Компьютер и Интернет для ЖЕНЩИН. (272 с.) 1 |167 | 
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О\0-видеодиски с помощью Scenarist Pro. + РУО-ДИСК. — 
ЭКСКЛЮЗИВ С.М. Блохнин. (384 с.) 


056 | Быстро и легко осваиваем Adobe Photoshop CS2. + СО-ДИСК. (320 с.) 


Быстро и легко осваиваем цифровую фотографию. (384 с.) | 229 | 


063 Быстро и легко создаем, программируем, шлифуем и раскручиваем 
Web-canrt. + СО-ДИСК. (400 с.) 


030 Создаем и копируем диски CD-ROM, DVD-ROM, CD-R/RW, 
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Macromedia FLASH 8. Фирменное руководство с от ‘Maccomedia. (256 Gc.) 
186 ActionScript 2.0 для macromedia Flash 8. 698 
Фирменное руководство от Macromedia. (880 с.) 
187 3ds Мах 8. Новые возможности. 
Фирменное руководство от Autodesk. + СО-ДИСК. (240 с.) 
182 AutoCAD 2007. Фирменное руководство от Autodesk. 
Русская версия. + СО-ДИСК. (944 с.) 


Sound Forge 8. Звуковая студия. Фирменное руководство от Sony. (480 с.) |445. 
Ulead MediaStidio Pro 8. Фирменное руководство от Ulead. (304 с.) |336. 
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038 | Домашний кинотеатр из компьютера. (240 с.) 


044 | Компьютер для студентов. (224 с.) 


045 | Запись CD и DVD своими руками. (208 с.) 


046 | Апгрейд своими руками. (224с.) 
048 | Adobe Photoshop для Web. (224 с.) 
049 | Музыкальные компакт-диски своими руками. (192 с.) 


050 | Видеомонтаж на домашнем компьютере. + СО-ДИСК. (208 с.) 
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053 Adobe Photoshop. Ретушь, спецэффекты, коллажи и карикатуры 
своими руками. + СО-ДИСК. (192 с.) 
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НУМЕРОЛОГИЯ с помощью компьютера и без него. Самоучитель. 
ХИТ сезона + СБ-ДИСК. (352 с.) 277 
Создание \ММеБ-страниц и Web-cantos. Самоучитель. 


Абсолютный Современный самоучитель работы на ПК. Быстрый старт. — 
Хит — 


innacle 10 war за шагом. + Видеокурс. (288 с.) 


A ЛЮБЛЮ ЦИФРОВУЮ ФОТОГРАФИЮ. 20 программ для 
обработки, печати и демонстрации цифровых фотографий. 
+ СО-ДИСК. (416 c.) 


Я ЛЮБЛЮ КОЛЛЕКЦИОНИРОВАТЬ МУЗЫКУ НА ПК. 
50 программ для создания, клонирования, копирования и перекодирования 
музыкальных дисков AudioCD, MP3, DVD-Audio... + CD-ZJMCK. (416 с.) 


Я ЛЮБЛЮ ИНТЕРНЕТ. 10 программ для участия в чатах и видеоконферен- 
циях, поиска и проигрывания музыки, получения почты и защиты от спама, 
быстрой загрузки файлов, безопасной работы в сети. 

+ СО-ДИСК. (320 с.) 


Я ЛЮБЛЮ КОМПЬЮТЕРНУЮ САМООБОРОНУ. 25 способов 

и программ для защиты своего ПК, своей сети, своей информации 
от хакеров, конкурентов, сослуживцев и др. любопытных чудаков. 
+ СО-ДИСК. (432 с.) 


Я ЛЮБЛЮ ВИДЕОМОНТАЖ. 15 программ для ввода/вывода видео, 
видеомонтажа, создания спецэффектов, видеокомпозиций и озвучивания 
фильмов... + CD-ZIMCK. (432 с.) 


Я ЛЮБЛЮ СОЗДАВАТЬ И КОПИРОВАТЬ ВИДЕОДИСКИ. 

25 программ для создания и копирования видеодисков VideoCD, SuperVideoCD, 
MPEG 4, DVD и нестандартных дисков X(S)VideoCD. 

+ СО-ДИСК. (400 с.) 
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Pinnacle Studio 10. Видеомонтаж и О\УО-диски. (256 с.) |169. 


Видеомонтаж средствами Sony Vegas 6. + СО-ДИСК. (320 с.) 
27.1 100% самоучитель по созданию Web-ctpanny и Web-cantos. 217 
HTML и JavaScript. (464 с.) 
32-8 | 100% самоучитель. Музыкальный редактор Cakewalk Sonar (208 с.) 


100% самоучитель. AutoCAD 2006. Русская версия. (336 с.) 
232 | 100% самоучитель. AutoCAD 2007. Рус. и англ. версии. (352 с.) 197 


34-4 | 100% самоучитель цифровой фотографии. + СО-ДИСК. (240 с.) 1 


33-6 100% самоучитель Adobe Photoshop CS2 для обработки цифровых 197 
фотографий и других изображений. + СО-ДИСК. (240 с.) 


35-2 | 100% самоучитель. Linux. (336 с.) 187 
Серия «ВИЗУАЛЬНЫЙ САМОУЧИТЕЛЬ» ae : 
Ulead MediaStudio Pro 8. Видеомонтаж. (256 с.) 
Видеомонтаж средствами Pinnacle Studio 10. Русская версия. (192 с.) 
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157 Создание CD и DVD любых форматов. Nero Burning ROM 7 + 
Pinnacle Studio 10. (240 c.) 
1С:Бухгалтерия 7.7. (176 c.) 


_Cepus «ВИЗУАЛЬНЫЙ САМОУЧИТЕЛЬ + ВИДЕОКУРС» = 


Ulead MediaStudio Pro 8. Видеомонтаж на ПК. + Видеокурс. (256 с.) 237 
НАГЛЯДНАЯ 


КНИГА CD u DVD. Создание дисков любых форматов. + Видеокурс. (240 с.) 237 
а 1С:Бухгалтерия 7.7. + Видеокурс. (176 с.) 237 


ВИДЕОКУРСОМ 226 Windows ХР. Установка, настройка, восстановление и переустановка. 207 
+ Видеокурс. (224 с.) 


«ТЕХНИЧЕСКИЙ БЕСТСЕЛЛЕР» 
Программирование ИГР. + СО-ДИСК. (384 с.) 


Эффективный Web-caut. Разработка, дизайн, маркетинг. (560 с.) 
БЕСТСЕЛЛЕР 1С:Бухгалтерия 7.7. Полный сборник ответов. (384 с.) 


№ 
“NJ 


№ 
^^ 


+ СО-ДИСК. (352 с.) 


1С:Бухгалтерия 7.7. В вопросах и ответах. (384 с.) 
Опыт С++ без страха. + СО-ДИСК. (432 с.) 

экспертов 

10 программ для создания О\О-видеодисков. О\О-авторинг. (496 с.) 


Ulead MediaStudio Pro 8. Видеомонтаж и фабрика видеодисков. 


`«РиЙ Союг» В ЦВЕТЕ! 


Большой Компьютер с самого начала В ЦВЕТЕ! Computer Basics. (256 с.) |341. 


формат 149 Визуальный самоучитель работы на компьютере и в сети Интернет. 
ЦВЕТНАЯ КНИГА. (272 с.) 


БЛАНК ЗАКАЗА 1 


Для получения книг наложенным платежом 
выберите интересующие Вас книги из предложенного списка 
и оформите БЛАНК ЗАКАЗА: 
внимательно заполните соответствующие колонки 
и внесите свои данные в поля на обороте бланка заказа. 
Оформленный БЛАНК ЗАКАЗА пришлите нам по адресу: 


125438, г. Москва, а/я 18 «Триумф» 


Также принимаются заказы, оформленные на ксерокопии бланка заказа или от руки. 
Лот Название книги Цена Кол Стоимость 
книги (можно кратко) книги -BO 


«Dreamweaver 8» 


БЛАНК ЗАКАЗА >". 


Заполняйте поля аккуратно большими отдельными буквами. 


1. Фамилия, имя, отчество 


Почтовый адрес 
индекс область 
район 


населенный пункт (город, поселок) 


улица, дом, кв. 


3. Телефон для связи (в том числе код города) 


4. Хотели бы ВЫ получать БЕСПЛАТНЫЙ каталог наших книг? | | Да М Нет 


ВНИМАНИЕ!!! ПОДАРОК!!! 


Каждый, приславший название и адрес магазина, в котором была приобретена наша 
книга, получит ПОДАРОК-КНИГУ (бесплатно) от издательской группы «Триумф». 


А тем, кто сообщит название и адрес других книжных магазинов города, в которых 
присутствует компьютерная литература, кроме ПОДАРКА-КНИГИ, дополнительно 
получит ещё один ПОДАРОК-СЮРПРИЗ (бесплатно). 


Ждём Ваших сообщений. Спешите получить ПОДАРКИ!!! 


. 


Заранее благодарим Bac! 


Дата Подпись 


ен aE Scene 


НАШИ КНИГИ МОЖНО ПРИОБРЕСТИ 


в крупнейших магазинах г. Москвы 


® «Молодая гвардия» 

® «Библио-Глобус» 

® «Московский дом книги» 
® «Торговый дом Москва» 
® «Дом технической книги» 


® Сеть магазинов «Новый книжный» 


в Санкт-Петербурге 


в Архангельске 
в Белгороде 
в Екатеринбурге 


в Волгограде 
в Воронеже 


в Калининграде 


Б. Полянка yn., д. 28. ст. М «Полянка» 
Мясницкая yn., д. 6. ст. М «Лубянка» 


Новый Арбат, д. 8 


Тверская yn., д. 8. ст. М «Тверская» 


Ленинский пр-т, д. 40. ст. М «Ленинский проспект» 


«Дом книги» 
«Новая техническая книга» 


Книжный клуб в ДК им. Крупской 


Магазин «АВФ-книга» 


Магазин «Океан» 


® «Дом книги» 
@ Книжный магазин №14 


Магазин «Современник» 


Магазин «Утюжок», 2 этаж 
Магазин «Амиталь» 


Группа компаний «Вестер» 


и других магазинах города 


Невский пр-т, д. 62 
Измайловский пр-т, д. 29 
Пр-т Обуховской обороны, д. 105 


Пл. Ленина, д. 3 
Костюкова yn, д. 3 


Валека yn., д. 12 
Челюскинцев yn., д. 23 


Пр-т Ленина, д. 2 


Пр-т Революции, д. 58 
Пл. Ленина, д. 4 


Судостроительная yn., д. 75 


в Липецке ® «Мир книги» Берзина yn., д. 3a 
в Омске ® «Омский книготорговый дом» Пр-т Мира, д. 44 
«Омский книготорговый дом» Багдана Хмельницкого yn., д. 162 
в Рязани ® Торговый дом «Барс» Московское ш., д. 5a 
в Самаре ® Магазин «Чакона» Чкалова ул., д. 100 


в Смоленске 
в Ставрополе 


«Книжный Мир» 


«Книжный дом» 


Дзержинского yn., д. 18, корп. 2 


Пр-т Карла Маркса, д. З/1а 


в Тюмени ® «Дом книги» Тульская yn., д. 12, корп. 2 
® «У Друга» Холодильная ул., д. 71a 
в Челябинске ® «Эврика» Барбюса yn., д. 61 


у наших представителей в Белоруссии 


® Магазин «Мир книг» 
® ЗАО «Делсар» 


г. Минск, Янки Купалы yn., д. 27 


г. Минск, Академическая ул., д. 28, к. 111 (оптовые 
поставки); тел. (+1037517) 284-16-55, 284-03-23 
Интернет-магазин (розничные продажи): www.lit.by 


у наших представителей в Латвии 


® SIA «Ekslibris Plus» 


г. Pura, e-mail: ekslibris@apollo.lv ; Ten. (+371) 9458348 


г. Pura, Бульвар Аспазияс 24, Рига, LV-150 
тел. 7227482; e-mail: gramatunams@valterunrapa.lv 


@ Книжный дом «Valters un Rapa» 
www.valtersunrapa.lv 


у наших представителей на Украине Киеве 


г. Киев, тел. (+1038044) 502-23-08, 502-23-84 
e-mail: market@irina-press.kiev.ua 

г. Киев, тел. (+1038044) 502-23-08, 502-23-84 
e-mail: tk@techbook.kiev.ua 


г. Харьков, тел. (057) 754-91-16; 
e-mail: k-kK@scana.com.ua 


® Издательство «Ирина-Пресс» 


® ‹«Гехническая книга» 
www.tk.com.ua 


® ЧП ‹КУДЬ А.Я.» 


OTAeA распространения 


группы излательств «ТРИУМФ»: 


и «Издательство Триумф» 
и «Лучшие книги» 

Y «Гехнический бестселлер» 
и «Голько для взрослых» 

и «Гехнолоджи — 3000» 

и «25 КАДР» 

и «100 КНИГ» 


Телефон: (495) 772-19-56, (495) 720-07-65. 
E-mail: opt@triumph.ru 


Посетите наш Интернет-магазин «Три ступеньки»": 


www.3st.ru 


КНИГА — ПОЧТОЙ: 


125438, г.Москва, а/я 18 «Триумф». 


E-mail: post@triumph.ru 


\’еБ-дизайн 
в Dreamweaver 8 


Книга посвящена самой популярной программе 
для создания Web-cautos Масготеа!а 
Dreamweaver 8. 


Быстрый Прочитав книгу, вы сможете быстро создавать 
| собственные \МеБ-страницы и \МеБ-сайты, 
снабжая их авторским оформлением, графикой 
и анимацией. 


старт 


Рассматриваемые темы: 


ГЛАВА 1. Осваиваем работу с НТМ!-редактором Dreamweaver 
ГЛАВА 2. Вводим на Меб-страницу таблицы 
ГЛАВА 3. Украшаем Web-cTpaHuuy рисунками и делаем ее звучащей 


ГЛАВА 4. Добавляем на \\Меб-страницу фреймы и учимся 
перемещаться между ними 


ГЛАВА 5. Осваиваем бесплатный движок XOOPS 


ГЛАВА 6. Запускаем движок, одним приемом строим Web-noptan 
и бесплатно помещаем его в Интернет 


ISBN 978-5-89392-236-3 
Интернет-магазин Телефон для товароведов: 
«Три ступеньки»® (495) 772-19-56 
785 3 


893192236 www.3st.ru E-mail: opt@triumph.ru 


